Features
This is a list of features that are available in the Editor Starter.
Feature flags
Many features are behind feature flags, which can be enabled or disabled by switching the flags in src/flags.ts.
Feature flags are useful:
- To disable features you don't need
- To search the codebase for them and find where a feature is implemented
- To understand which features you are adopting for your own project
If a feature has a flag, you can click on it on this page to see the usages in the codebase.
The link will only work if you have bought the Editor Starter and are logged into GitHub.
Item types
We support the following item types by default:
- Images
- Videos
- Audios
- GIFs
- Text
- Solid
- Captions
To learn more about them and how to add a new item type, see: Tracks, items and assets
Timeline
The timeline allows you to see a overview of the content and to scrub through the video.
Items are organized in "tracks", allowing multiple items to be placed at the same time and to allow for controlling how they overlap.
Draggable playhead
Pressing and dragging on the time ticks allows you to move the playhead and therefore the position of the video.
If you drag the playhead to the edge of the timeline, the timeline will scroll.
Zoom slider
Feature flag: FEATURE_TIMELINE_ZOOM_SLIDER
Displays a slider at the right of the toolbar allowing to zoom in and out of the timeline.
Filmstrip thumbnails
Feature flag: FEATURE_FILMSTRIP
For video items, preview images are displayed on the timeline.
Extend handles
You can drag on either side of an item to extend or shrink the item.
Audio waveform
Feature flag: FEATURE_WAVEFORM
Video and audio items display a waveform at the bottom of the timeline.
Volume control
Feature flag: FEATURE_VOLUME_CONTROL
Audio and video items display a draggable volume line on the timeline waveform. Dragging vertically adjusts the volume in decibels with a visual indicator showing the current level.
Dropping assets
An asset (image, video, audio, GIF) can be dropped on the timeline to import it and add a new layer.
The item type is detected by Remotion Media Parser and an appropriate item is created.
Fade in and out
Feature flags: FEATURE_AUDIO_FADE_CONTROL and FEATURE_VIDEO_FADE_CONTROL
Audio and video items support fade in and fade out effects. Draggable handles appear on hover at the start and end of items to adjust fade duration, with visual curves showing the fade effect.
Drag and dropping
Items can be dragged and repositioned on the timeline. Multi-select is supported, allowing you to drag multiple items at once. A shadow overlay shows where the moving item is being placed when dragging.
Automatic duration
When assets are imported, items are automatically assigned appropriate durations based on the asset's length. Video and audio items use the media duration, while images and text use default durations.
Multi-select
Multiple items can be selected using Cmd/Ctrl+click (alternatively Shift+click) to add items to the selection, or range selection (so called Marquee selection) is possible by choosing a contiguous block of items. Selected items can be moved, deleted, or edited together.
Splitting items
Items can be split at the current playhead position using the scissors tool. The split creates two separate items, properly handling fade effects and media start times for the new segments.
Hide track
Feature flag: FEATURE_HIDE_TRACKS
Allows hiding the tracks on the timeline.
Mute track
Feature flag: FEATURE_MUTE_TRACKS
Allows muting the track.
Rolling edits
Feature flag: FEATURE_ROLLING_EDITS
Rolling edits are a video editing feature that allows you to adjust the cut point between two adjacent timeline items without changing their total combined duration or position on the timeline.
Inspector
On the right side of the screen, an inspector is displayed which allows for editing the properties of the selected item.
The following features are available
Composition inspector
If no item is selected, controls for the whole composition are displayed: Setting the dimensions and triggering a render.
Layer alignment
Feature flag: FEATURE_ALIGNMENT_CONTROL
Buttons for aligning the item to the left, vertical center, right, top, horizontal center, bottom.
Position controls
Feature flag: FEATURE_POSITION_CONTROL
Allows setting the precise X and Y position of the item.
Dimensions controls
Feature flag: FEATURE_DIMENSIONS_CONTROL
Allows setting the width and height of the item.
Border radius control
Feature flag: FEATURE_BORDER_RADIUS_CONTROL
Allows setting the border radius of the item.
Opacity control
Feature flag: FEATURE_OPACITY_CONTROL
Allows setting the opacity of the item.
Text alignment
Feature flag: FEATURE_TEXT_ALIGNMENT_CONTROL
Allows setting the text alignment of the item (left, center, right).
Font family
Feature flag: FEATURE_FONT_FAMILY_CONTROL
Allows setting the font family of the item.
Font family preview
Feature flag: FEATURE_FONT_FAMILY_DROPDOWN_RENDER_IN_FONT
Each item in the font family dropdown is rendered in the font itself.
Hover to preview font family
Feature flag: FEATURE_FONT_FAMILY_DROPDOWN_HOVER_PREVIEW
When hovering over an item in the font family dropdown, the text item in the canvas updates with a preview of what the item would look like if it the hovered item was selected.
Font style
Feature flag: FEATURE_FONT_STYLE_CONTROL
Allows setting the font style variant and weight (normal, italic, bold, etc.) for text and caption items. Includes live preview when hovering over options.
Font size
Feature flag: FEATURE_TEXT_FONT_SIZE_CONTROL
Allows setting the font size of the item.
Text value
Feature flag: FEATURE_TEXT_VALUE_CONTROL
Allows editing the text content via a text area in the inspector. Text area automatically resizes based on content and alignment settings.
Color
Feature flag: FEATURE_COLOR_CONTROL
Provides a color picker for text, solid, and caption items. Supports full RGB color selection for the item's primary color property.
Rotation
Feature flags: FEATURE_ROTATION_CONTROL and FEATURE_ROTATE_90_DEGREES_BUTTON
Line height
Feature flag: FEATURE_TEXT_LINE_HEIGHT_CONTROL
Allows setting the line height for text and caption items. Accepts values from 0.5 to 5.0 with automatic text relayout when changed.
Letter spacing
Feature flag: FEATURE_TEXT_LETTER_SPACING_CONTROL
Allows setting the letter spacing for text and caption items. Supports values from -10px to 50px with automatic text relayout when changed.
Text direction
Feature flag: FEATURE_TEXT_DIRECTION_CONTROL
Provides left-to-right (LTR) and right-to-left (RTL; like Arabic) text direction controls. Text direction is automatically detected when creating new text items, but can be manually overridden.
Playback speed
Feature flag: FEATURE_PLAYBACKRATE_CONTROL
Allows setting the playback rate for video, audio, and GIF items. Supports rates from 0.25x to 5x with automatic duration adjustment based on the new playback speed.
Volume
Feature flag: FEATURE_VOLUME_CONTROL
Provides a volume slider for audio and video items with decibel-based adjustment. Shows the current dB difference to the original audio.
Fade in and out
Feature flags: FEATURE_AUDIO_FADE_CONTROL and FEATURE_VIDEO_FADE_CONTROL
Provides precise controls for fade in and fade out durations for audio and video items. Allows setting fade times in seconds with visual preview of the fade effect.
Playback
Play / Pause button
A central play/pause button that starts or stops the video playback. It can be controlled using the Space bar on the keyboard and changes its icon to reflect whether the video is currently playing or paused.
Current time indicator
Displays the current playhead position in timecode format (MM:SS.FF, where FF is the frame number). Updates in real-time as the video plays or when scrubbing through the timeline.
Fullscreen button
Feature flag: FEATURE_FULLSCREEN_CONTROL
Allows entering fullscreen mode for the video player (exiting with Esc).
Mute button
Feature flag: FEATURE_MUTE_BUTTON
Global mute/unmute switcher for the entire timeline audio. Visual indicator shows current mute state.
Loop
Feature flag: FEATURE_LOOP_BUTTON
Switcher button to enable or disable looping of the entire timeline. When enabled, the video will automatically restart from the beginning after reaching the end. Visual indicator shows current loop state.
Canvas
Click to select
Clicking on items in the canvas selects them. Selected items show a blue outline and can be edited via the inspector. Clicking on empty space deselects all items.
Move and resize
Selected items can be dragged to move their position on the canvas. Resize handles appear on selected items allowing for width and height adjustment by dragging the corners or edges.
Shift axis lock
Feature flag: FEATURE_SHIFT_AXIS_LOCK
While dragging holding Shift constrains item movement to horizontal or vertical axis only, helping with precise positioning and alignment.
Shift aspect ratio lock
Feature flag: FEATURE_SHIFT_KEY_TO_OVERRIDE_ASPECT_RATIO_LOCK
Holding Shift while resizing video items overrides the original aspect ratio, enabling distortion when scaling video items up or down. This feature is disabled by default.
Multi-select
Multiple items can be selected by holding Cmd/Ctrl while clicking additional items. All selected items can be moved together.
Marquee selection
Click and drag on empty canvas areas to create a selection rectangle that selects all items within its bounds. Useful for quickly selecting multiple items in a region.
Dropping assets
Assets can be dropped directly onto the canvas from the file system. The item is automatically positioned at the playhead location and added to an appropriate track on the timeline.
Zoom (level)
The canvas supports zooming in and out to view items at different scales. The zoom level on the canvas is displayed as a percentage and can be reset to fit the available space.
Pinch to zoom / Ctrl + mouse wheel to zoom
On desktop, holding Ctrl/Cmd while scrolling the mouse wheel zooms in and out of the canvas with the mouse position as the zoom center. On touch devices, pinch gestures zoom into the canvas.
Plus and minus buttons
Physical zoom buttons provide an alternative way to zoom in (+) and zoom out (-) of the canvas. Also includes a reset button to return to the default fit-to-canvas zoom level.
Copy and paste
Feature flags: FEATURE_COPY_PASTE_LAYERS and FEATURE_PASTE_ASSETS
Items can be copied with Cmd/Ctrl+C and pasted with Cmd/Ctrl+V. Pasted items are automatically positioned and can include text, images, and other assets from the clipboard.
Bring to front / Send to back
Items can be reordered by moving them between tracks on the timeline. Items on higher tracks appear in front of items on lower tracks in the final composition.
Behaviors
Cut, copy, paste, duplicate
Feature flags: FEATURE_CUT_LAYERS, FEATURE_COPY_PASTE_LAYERS, and FEATURE_DUPLICATE_LAYERS
Standard cut (Cmd/Ctrl+X), copy (Cmd/Ctrl+C), and paste (Cmd/Ctrl+V) operations work with timeline items. Duplicate (Cmd/Ctrl+D) creates copies of selected items with automatic positioning.
Save and load
Feature flag: FEATURE_SAVE_BUTTON
Project data is automatically saved to browser's local storage. Manual save can be triggered with Cmd/Ctrl+S. Projects automatically load when returning to the editor.
Asset uploads
Assets are uploaded and processed when dropped into the editor. Upload progress is shown with indicators, and assets are stored for use across browser sessions. Multiple file formats are supported.
Undo and redo
Feature flags: FEATURE_UNDO_BUTTON and FEATURE_REDO_BUTTON
Full undo/redo system tracks all changes to the timeline and canvas. Use Cmd/Ctrl+Z to undo and Cmd/Ctrl+Y or Cmd/Ctrl+Shift+Z to redo actions.
Asset caching
Feature flag: FEATURE_CACHE_ASSETS_LOCALLY
Assets are cached locally in the browser using IndexedDB for faster loading and offline editing capabilities. Cached assets persist across browser sessions.
Rendering
Remotion integration
The editor integrates directly with Remotion's rendering engine. The composition created in the editor can be rendered to MP4 or other video formats using Remotion's rendering capabilities.
Render button
Triggers the rendering process to export the current composition as a video file. Shows render progress and allows download of the final rendered video.
Keyboard shortcuts
| ⌘/CtrlZ | Undo | FEATURE_UNDO_SHORTCUT |
| ⌘/CtrlY ⌘/CtrlShiftZ | Redo | FEATURE_REDO_SHORTCUT |
| 1 frame forward | ||
| 1 frame backwards | ||
| + | Zoom in | |
| - | Zoom out | |
| 0 | Reset zoom | |
| Space | Play / Pause | |
| ⌘/CtrlS | Save | FEATURE_SAVE_BUTTON |
| Hold Shift or ⌘/Ctrl | While selecting items (multi-select) | |
| Hold Shift while dragging item | Constrain movement to horizontal/vertical axis only | FEATURE_SHIFT_AXIS_LOCK |
| ⌘/CtrlA | Select all items | |
| ⌘/CtrlX | Cut selected item(s) | FEATURE_CUT_LAYERS |
| ⌘/CtrlC | Copy selected item(s) | FEATURE_COPY_PASTE_LAYERS |
| ⌘/CtrlV | Paste item(s) | FEATURE_COPY_PASTE_LAYERS |
| ⌘/CtrlD | Duplicate selected item(s) | FEATURE_DUPLICATE_LAYERS |
| Delete | Delete selected item(s) | FEATURE_BACKSPACE_TO_DELETE |
Captioning
Let your users create TikTok-style captions for videos and audio assets using AI-powered transcription. After transcription, the editor creates a Captions item and adds it to the timeline. Users can edit the captions in the inspector, customize the style and timing.
Transcription providers
For more details, see Captioning in the Editor Starter.