The built-in media editor lets you crop, filter, adjust, and transform photos, and trim, speed-adjust, and mute videos -- all without leaving the post creation wizard. The editor opens as a full-screen overlay with a dark theme and provides platform-specific crop presets so your media fits perfectly on Instagram, Facebook, and TikTok.
Opening the Editor
During post creation (Step 1: Media), click on any uploaded media thumbnail or the "Edit" button overlay that appears on hover. The editor detects the file type automatically:
- Image files (JPEG, PNG, BMP) open the Photo Editor with seven tools: Crop, Adjust, Filter, Text, Transform, Tag People, and Preview.
- Video files (MP4, MOV) open the Video Editor with three tools: Trim, Speed, and Mute.
Editor Layout
The editor uses a responsive layout that adapts to your screen size:
Desktop (768px and wider):
- A header bar at the top with the editor title, undo/redo buttons, display mode toggle, Save button, and Close button
- A left sidebar (64px wide) with vertical tool icons
- A center canvas area showing the image or video preview
- A right panel (300px wide) that appears when a tool is active, showing the tool's controls
Mobile (below 768px):
- A header bar at the top
- The center canvas taking full width
- A horizontal tool bar at the bottom with scrollable tool tabs
- An expandable tool panel below the tool bar (max 192px height) when a tool is active
- A footer with Cancel and Save buttons
Display Modes
On mobile, the editor can operate in two display modes:
- Sheet mode -- The editor opens as a bottom sheet covering 95% of the viewport height, with rounded top corners
- Fullscreen mode -- The editor fills the entire screen
Toggle between modes using the expand/collapse button in the header.
Photo Editor
The Photo Editor provides seven tools for non-destructive image editing. All edits are applied to a canvas and exported as a single JPEG file when you save.
Crop Tool
The Crop tool lets you select a region of your image using platform-specific aspect ratio presets. Presets are grouped by platform:
Instagram Presets:
| Preset | Aspect Ratio | Resolution | Use Case |
|---|---|---|---|
| Square | 1:1 | 1080x1080 | Feed posts, profile grid |
| Portrait | 4:5 | 1080x1350 | Feed posts (maximum vertical space) |
| Stories/Reels | 9:16 | 1080x1920 | Stories and Reels |
| Landscape | 1.91:1 | 1080x566 | Landscape feed posts |
Facebook Presets:
| Preset | Aspect Ratio | Resolution | Use Case |
|---|---|---|---|
| Landscape | 1.91:1 | 1080x566 | Timeline posts |
| Square | 1:1 | 1080x1080 | Timeline posts |
| Stories | 9:16 | 1080x1920 | Facebook Stories |
TikTok Presets:
| Preset | Aspect Ratio | Resolution | Use Case |
|---|---|---|---|
| Video | 9:16 | 1080x1920 | TikTok videos |
Free:
| Preset | Aspect Ratio | Resolution | Use Case |
|---|---|---|---|
| Free | Any | Any | Custom crop without aspect ratio constraint |
Select a preset to see its label and recommended resolution. The active preset is highlighted with an amber border. Click Apply to confirm the crop or Reset to remove it and return to the full image.
Adjustments Panel
The Adjustments panel provides three sliders for fine-tuning the image appearance. Each slider ranges from 0% to 200%, with 100% being the neutral (unchanged) value:
| Adjustment | What It Does | Default |
|---|---|---|
| Brightness | Controls the overall lightness or darkness of the image. Values below 100% darken the image; values above 100% lighten it. | 100% |
| Contrast | Controls the difference between light and dark areas. Higher values make light areas lighter and dark areas darker. | 100% |
| Saturation | Controls the intensity of colors. 0% produces a fully desaturated (grayscale) image; 200% produces hyper-vivid colors. | 100% |
Each slider shows its current percentage value on the right side. A Reset button (circular arrow icon) at the bottom restores all three sliders to their default 100% values. The button is disabled when all sliders are already at their defaults.
Adjustments are applied as CSS canvas filters and are combined with any active filter preset.
Filter Gallery
The Filter Gallery offers 12 pre-built filter presets inspired by popular social media aesthetics. Each filter is shown as a small square thumbnail (72x72px) with the filter effect applied to your actual image, so you can preview the result before selecting.
Available filters:
| Filter | Effect Description |
|---|---|
| Original | No filter applied. Returns the image to its unfiltered state. |
| Clarendon | Increases contrast and saturation for a vivid, punchy look. |
| Gingham | Slightly brightens with a subtle warm hue rotation, giving a soft vintage feel. |
| Moon | Full grayscale conversion with slightly increased contrast and brightness for a dramatic black-and-white look. |
| Lark | Reduces contrast while increasing brightness and slightly desaturating for a light, airy aesthetic. |
| Reyes | Applies a sepia tone with reduced contrast and saturation for a faded, dusty vintage look. |
| Juno | Strongly boosts saturation and contrast with a slight sepia tint for warm, vibrant tones. |
| Slumber | Desaturates while adding brightness and a subtle sepia for a dreamy, muted palette. |
| Crema | Light sepia with gentle contrast and brightness boost for a warm, creamy tone. |
| Ludwig | Subtle contrast and brightness increase with light sepia and slight desaturation for a clean, editorial look. |
| Aden | Warm hue rotation with reduced contrast and desaturation for a golden-hour glow. |
| Perpetua | Gentle increase in contrast, brightness, and saturation for a naturally enhanced look. |
Click a filter thumbnail to apply it. The selected filter is highlighted with an amber ring. Click the same filter again (or click "Original") to remove it.
On mobile, filters scroll horizontally in a single row. On desktop, they display in a 4-column grid.
Text Overlay Tool
The Text Overlay tool lets you add one or more text labels on top of your image. Each text overlay can be individually styled and positioned.
Adding text: Click the amber Add Text button to create a new text overlay. It appears at the center of the image with default settings (white color, 32px font size, Inter font).
Text list: All added text overlays appear in a scrollable list. Click on an overlay to select it for editing. The selected overlay has an amber border. Click the X button on any item to delete it.
Editing a selected overlay: When a text overlay is selected, the following controls appear:
| Control | Description |
|---|---|
| Text input | A textarea to edit the displayed text. Supports multi-line content. Auto-focuses when a new overlay is created. |
| Font selector | A dropdown with 6 font families: Inter (sans-serif), Georgia (serif), Courier New (monospace), Arial Black (sans-serif), Impact (sans-serif), Comic Sans MS (cursive). |
| Size slider | Adjusts font size from 12px to 96px in 1px increments. Current size is shown in parentheses. |
| Color palette | 10 color swatches in a grid: white, black, red, green, blue, yellow, orange, magenta, cyan, amber. The selected color has an amber ring and is slightly enlarged. |
| Bold toggle | Toggles bold weight. When active, the button fills with amber. |
| Italic toggle | Toggles italic style. When active, the button fills with amber. |
| Delete button | Red-tinted button to remove the selected text overlay. |
Text overlays can be repositioned by dragging them on the canvas (the x/y coordinates are stored as percentages of the image dimensions).
Transform Controls
The Transform panel provides three action buttons in a horizontal row for rotating and flipping the image:
| Control | What It Does |
|---|---|
| Rotate (clockwise arrow icon) | Rotates the image 90 degrees clockwise with each click. Four clicks return to the original orientation. The current rotation angle is displayed below the buttons when non-zero (e.g., "Rotation: 90 degrees"). |
| Flip H (horizontal flip icon) | Mirrors the image horizontally (left-right). When active, the button is highlighted with an amber tint. Click again to undo. |
| Flip V (vertical flip icon) | Mirrors the image vertically (top-bottom). When active, the button is highlighted with an amber tint. Click again to undo. |
Transforms are applied on top of any crop, filter, and adjustment settings.
Tag People Tool
The Tag People tool lets you tag Instagram users on your image. Tagged users are submitted as Instagram user tags when the post is published.
Platform note: Tagging people is only available for Instagram. If no Instagram account is selected for the post, a warning appears that tags will not be published.
Entering a username: Type the Instagram username (without the @ symbol) into the text field. The @ symbol is automatically stripped if you include it.
Placing a tag: There are two ways to place a tag:
| Method | Description |
|---|---|
| Click on the image | Once a username is entered, the cursor on the image changes to a crosshair. Click on the desired position to place the tag there. |
| Place in center | Click the "Place in center" button to automatically position the tag at the center of the image. This button only appears when a username has been entered. |
Tag list: All placed tags appear as a list below the input field. Each entry shows the Instagram icon and @username. Click the X button next to a tag to remove it. When the list is empty, the hint "No people tagged yet." is displayed.
Moving tags: Already placed tags can be repositioned by dragging them on the image. Positions are stored as normalized coordinates (0.0 to 1.0), so they display correctly at different image sizes.
Visual display on the canvas: Each tag is shown as a black speech bubble with @username and an arrow pointing to the exact position on the image.
Preview Tool
The Preview tool shows you a real-time preview of the final export result. All applied edits -- crop, adjustments, filters, text overlays, and transforms -- are reflected in the preview.
The preview is displayed as a scaled-down image (maximum 280 pixels on the longest side) in JPEG format. It updates automatically whenever you change any editing settings.
Below the preview, the current image dimensions are displayed so you can verify that the result has the desired size.
Undo and Redo
The Photo Editor maintains a history stack of up to 30 states. The header bar shows Undo and Redo buttons that become active when history is available. Every change (crop preset selection, slider adjustment, filter selection, text modification, rotation, flip) creates a new history entry that you can step through.
Saving Photo Edits
Click the Save button in the header (or the Save button in the mobile footer). The editor:
- Renders the full-resolution image to an off-screen canvas with all edits applied (crop, adjustments, filters, text overlays, transforms)
- Exports the canvas as a JPEG blob
- Creates a new File object with the name
{original-name}-edited.jpg - Returns the result to the post wizard, which replaces the original media item
- Re-validates the edited file against all selected platforms
The editor closes automatically after saving.
Video Editor
The Video Editor lets you trim, adjust speed, and mute videos before publishing. It uses ffmpeg.wasm for processing, which runs entirely in your browser.
Video Preview
The center area shows the video player with playback controls. The video plays within the current trim boundaries and respects the selected speed and mute settings. The preview updates in real time as you adjust the trim handles.
Video Timeline
Below the video preview, a timeline scrubber provides visual control over the trim region:
- Full track -- A horizontal bar representing the entire video duration
- Active region -- An amber-tinted section showing the portion of video that will be kept
- Dimmed regions -- Darker sections on the left and right showing the trimmed-away portions
- Trim start handle -- An amber circle on the left edge of the active region. Drag it to set the start point.
- Trim end handle -- An amber circle on the right edge of the active region. Drag it to set the end point.
- Playhead -- A thin white vertical line showing the current playback position
- Time labels -- Below the timeline, three labels show the trim start time, the trimmed duration, and the trim end time in M:SS format
The minimum gap between trim handles is 1 second, ensuring the exported video is at least 1 second long.
Click anywhere within the active region to seek the video to that position.
Trim Tool
The Trim tool is always active through the timeline -- there is no separate panel for it. Simply drag the start and end handles on the timeline to define the portion of video you want to keep. Everything outside the trim region will be removed during export.
Speed Selector
When the Speed tool is active, a panel appears with a segmented button row offering four speed options:
| Speed | Effect |
|---|---|
| 0.5x | Half speed (slow motion). Doubles the effective duration. |
| 1x | Normal speed (default). No change to duration. |
| 1.5x | 50% faster. Reduces effective duration by one-third. |
| 2x | Double speed (fast motion). Halves the effective duration. |
The selected speed is highlighted with an amber background. Speed changes affect the exported video -- the visual preview plays at the selected speed so you can evaluate the result.
Mute Toggle
When the Mute tool is active, a panel appears with a single toggle button:
- Unmuted state (speaker icon) -- Audio is included in the export. The button shows a gray background.
- Muted state (speaker-off icon) -- Audio is stripped from the video during export. The button is highlighted with an amber border.
Click the button to toggle between muted and unmuted states.
Processing and Export
When you click Save, the Video Editor:
- Loads ffmpeg.wasm -- The first time you use the video editor in a session, the ffmpeg WebAssembly engine (~30 MB) is downloaded and initialized. A progress overlay shows "Loading engine..." during this step.
- Processes the video -- Applies trim, speed, and mute settings. The overlay shows "Processing..." with a progress bar.
- Encodes the output -- Creates the final MP4 file. The overlay shows "Encoding..." with progress percentage.
- Returns the result -- The processed video replaces the original in the post wizard, and the editor closes.
The export duration is calculated as: (trimEnd - trimStart) / speed. For example, a 10-second clip at 2x speed produces a 5-second output.
Processing time depends on the video length and your device's performance. Short clips (under 30 seconds) typically process in a few seconds. Longer videos may take 30 seconds or more.
Frequently Asked Questions
Does the editor modify my original file?
No. The editor creates a new file with the edits applied. Your original uploaded file is not modified. The new file replaces the original in the post wizard's media list and is flagged for upload to S3 when you publish.
Can I undo all my changes?
For photos, use the Undo button in the header to step back through your edit history (up to 30 steps). For videos, the trim handles, speed, and mute can be adjusted freely before saving -- no undo system is needed since no changes are final until you click Save.
Why does the video editor take long to load the first time?
The video editor uses ffmpeg.wasm, a WebAssembly build of the FFmpeg video processing library. The first load downloads approximately 30 MB of engine files. These are cached by your browser, so subsequent uses are much faster.
Which crop preset should I use?
Choose the preset that matches your target platform and content type. For Instagram Feed posts, 1:1 (Square) and 4:5 (Portrait) work best. For Stories and Reels, use 9:16. For Facebook timeline posts, 1.91:1 (Landscape) is the standard. For TikTok, always use 9:16.
Can I add multiple text overlays?
Yes. Click "Add Text" multiple times to create as many text overlays as needed. Each overlay can have its own font, size, color, and position. Select an overlay from the list to edit its properties.
Do people tags work on Facebook and TikTok?
No. Tagging people is only available for Instagram. If you are scheduling a post for Facebook or TikTok only, the tags will be ignored. The editor shows a warning when no Instagram account is selected.
Where can I see a preview of the finished image?
Select the Preview tool (eye icon) in the toolbar. It shows the image with all applied edits in a scaled-down view. The preview updates automatically whenever you make a change.
Next Steps
- Creating a New Post -- Return to the post creation workflow
- Queue Management -- View and manage your scheduled posts
- Media Library -- Browse and organize your uploaded files