Features in the Editor Starter
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/editor/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
Action row
The action row is the top toolbar.
Draw solid tool
Feature flag: FEATURE_DRAW_SOLID_TOOL
Shows a button to draw a solid item onto the canvas.
Add text tool
Feature flag: FEATURE_CREATE_TEXT_TOOL
Shows a button to add a text item onto the canvas.
Import assets tool
Feature flag: FEATURE_IMPORT_ASSETS_TOOL
Shows a button to import assets onto the canvas.
Download state button
Feature flag: FEATURE_DOWNLOAD_STATE
Shows a button to download the current state of the project.
Load state button
Feature flag: FEATURE_LOAD_STATE
Shows a button to load a state of the project that has been downloaded with the FEATURE_DOWNLOAD_STATE button.
Save button
Feature flag: FEATURE_SAVE_BUTTON
Shows a button to save the current state of the project.
Undo button
Feature flag: FEATURE_UNDO_BUTTON
Shows a button to undo the last action.
Redo button
Feature flag: FEATURE_REDO_BUTTON
Shows a button to redo the last action.
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 flags: FEATURE_WAVEFORM and FEATURE_AUDIO_WAVEFORM_FOR_VIDEO_ITEM
Video and audio items display a waveform at the bottom of the timeline.
Volume control
Feature flag: FEATURE_TIMELINE_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
Feature flag: FEATURE_DROP_ASSETS_ON_TIMELINE
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
Feature flag: FEATURE_SPLIT_ITEM
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.
Max trim indicators
Feature flag: FEATURE_MAX_TRIM_INDICATORS
When extending an item, the maximum trim position is shown with a white outline of the item.
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.
Marquee selection
Feature flag: FEATURE_TIMELINE_MARQUEE_SELECTION
Multiple items can be selected while holding the mouse down on an empty area of the timeline and dragging it to another place, selecting all items inbetween.
Follow playhead while playing
Feature flag: FEATURE_FOLLOW_PLAYHEAD_WHILE_PLAYING
Scrolls the timeline as the playhead moves forward.
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.
Swap dimensions button
Feature flag: FEATURE_SWAP_COMPOSITION_DIMENSIONS_BUTTON
In the composition inspector, show a button to swap the width and height of the composition.
Source info
Feature flag: FEATURE_SOURCE_CONTROL
Shows information about the associated asset of this item, such as the file name and size, and upload progress and download progress of the asset.
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_CHANGE_FONT_FAMILY_ON_HOVER
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.
Hover to preview font style
Feature flag: FEATURE_CHANGE_FONT_STYLE_ON_HOVER
When hovering over an item in the font style 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 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.
Rotation
Feature flags: FEATURE_ROTATION_CONTROL and FEATURE_ROTATE_90_DEGREES_BUTTON
Allows changing the rotation of the item.
The FEATURE_ROTATE_90_DEGREES_BUTTON flag displays a button to quickly rotate the item by 90 degrees clockwise.
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.
Caption tokens
Feature flag: FEATURE_TOKENS_CONTROL
A control allowing the correction of the tokens of generated captions.
Caption page duration
Feature flag: FEATURE_CAPTIONS_PAGE_DURATION_CONTROL
A control allowing to set the duration of one page of captions.
Caption highlight color
Feature flag: FEATURE_CAPTIONS_HIGHLIGHT_COLOR_CONTROL
A control allowing to set the color of the currently spoken word in a caption page.
Playback
Play / Pause button
A central play/pause button that starts or stops the video playback. It can also be controlled using the Space bar on the keyboard.
Current time indicator
Displays the current playhead position in timecode format (MM:SS.FF, where FF is the frame number).
Jump to start button
Feature flag: FEATURE_JUMP_TO_START_BUTTON
Shows a button to jump to the start of the video.
Feature flag: FEATURE_JUMP_TO_END_BUTTON
Shows a button to jump to the end of the video.
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.
Loop
Feature flag: FEATURE_LOOP_BUTTON
Switcher button to enable or disable looping of the entire timeline.
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 holding Shift whend dragging 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 (disabled by default)
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
Feature flag: FEATURE_CANVAS_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
Feature flag: FEATURE_DROP_ASSETS_ON_CANVAS
Assets can be dropped directly onto the canvas from the file system.
The item is automatically positioned to start at the current time and at the position in the canvas where it was dropped.
Zoom controls
Feature flag: FEATURE_CANVAS_ZOOM_CONTROLS
Shows an interface at the top right of the editor to zoom in and out.
The zoom level on the canvas is displayed as a percentage and can be reset to fit the available space.
Zoom gestures
Feature flag: FEATURE_CANVAS_ZOOM_GESTURES
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.
Zoom keyboard shortcuts
Feature flag: FEATURE_CANVAS_ZOOM_KEYBOARD_SHORTCUTS
You can press + and - to zoom in and out.
Press 0 to reset the zoom.
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
Feature flags: FEATURE_BRING_TO_FRONT and FEATURE_SEND_TO_BACK
Right-clicking on an item shows a menu with options to bring the item to front or send it to back.
Behaviors
Cut, copy, paste, duplicate items
Feature flags: FEATURE_CUT_LAYERS, FEATURE_COPY_LAYERS, and FEATURE_DUPLICATE_LAYERS
Standard cut (Cmd/Ctrl+X), copy (Cmd/Ctrl+C), and paste (Cmd/Ctrl+V) operations work with items.
Duplicate (Cmd/Ctrl+D) creates copies of selected items.
Paste text
Feature flag: FEATURE_PASTE_TEXT
When pasting and there is text in the clipboard, the text is pasted as a text item.
Paste assets
Feature flag: FEATURE_PASTE_ASSETS
When pasting and there is an asset in the clipboard, the asset is pasted as a new item.
Due to browser support, this may only work with images.
Save and load
Feature flags: FEATURE_SAVE_BUTTON and FEATURE_SAVE_SHORTCUT
A save can be triggered with Cmd/Ctrl+S. When a project is saved, it will be automatically loaded when returning to the editor.
Load state from URL
Feature flag: FEATURE_LOAD_STATE_FROM_URL
Allows loading the initial state of the editor from a URL parameter ?state=.
The value must be a base64-encoded serialization of UndoableState.
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_SHORTCUT and FEATURE_REDO_SHORTCUT
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.
Warn on leave when long-running tasks are in progress
Feature flag: FEATURE_WARN_ON_LONG_RUNNING_PROCESS_IN_PROGRESS
Asks the user for confirmation when leaving the page while a render, asset upload or caption task is in progress.
Captioning
Transcription
Feature flag: FEATURE_CAPTIONING
Enables UI for transcribing audio and video assets to captions.
See: Captioning
Rendering
Render button
Feature flag: FEATURE_RENDERING
Enables UI for rendering the current composition to a video file. Shows render progress and allows download of the final rendered video.
Codec selector
Feature flag: FEATURE_RENDERING_CODEC_SELECTOR
Allows selecting the codec (MP4 / WebM) for rendering.
Keyboard shortcuts
| ⌘/CtrlZ | Undo | FEATURE_UNDO_SHORTCUT |
| ⌘/CtrlY ⌘/CtrlShiftZ | Redo | FEATURE_REDO_SHORTCUT |
| 1 frame forward | ||
| 1 frame backwards | ||
| + | Zoom in | FEATURE_CANVAS_ZOOM_KEYBOARD_SHORTCUTS |
| - | Zoom out | FEATURE_CANVAS_ZOOM_KEYBOARD_SHORTCUTS |
| 0 | Reset zoom | FEATURE_CANVAS_ZOOM_KEYBOARD_SHORTCUTS |
| 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 | FEATURE_SELECT_ALL_SHORTCUT |
| ⌘/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 or Backspace | Delete selected item(s) | FEATURE_BACKSPACE_TO_DELETE |