Features in the Editor Starter
On this page, we list the features that are available in the Editor Starter.
The Editor Starter consists of the following parts illustrated in this graphic:
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
On this page; if a feature has a flag, you can click on it to see the usages in the codebase. The links for the feature flags will only work if you have bought the Editor Starter (i.e., you have access to the repository) 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.
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.
Save button
Feature flag: FEATURE_SAVE_BUTTON
Shows a button to save the current state of the project.
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.
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.
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.
Filmstrip thumbnails
Feature flag: FEATURE_FILMSTRIP
For video items, preview images are displayed on the timeline.
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.
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.
Extend handles
You can drag on either side of an item to extend or shrink the item.
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 selected 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.
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.
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.
Multi-select / Marquee selection
Feature flag: FEATURE_TIMELINE_MARQUEE_SELECTION
Multiple items can be selected using Cmd/Ctrl+click (alternatively Shift+click) to add items to the selection, or so called Marquee selection to create a selection rectangle that selects all items within its bounds. Selected items can be moved, deleted, or edited together.
Hide track
Feature flag: FEATURE_HIDE_TRACKS
Allows hiding a specific track on the timeline.
Mute track
Feature flag: FEATURE_MUTE_TRACKS
Allows muting a specific track on the timeline.
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.
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 (i.e., composition inspector):
- Setting the dimensions
- Triggering a render
Swap dimensions button
Feature flag: FEATURE_SWAP_COMPOSITION_DIMENSIONS_BUTTON
Shows a button to swap the width and height of the composition (i.e., within the composition inspector).
Source info
Feature flag: FEATURE_SOURCE_CONTROL
Shows information about the associated asset of a selected item, such as the file name, file size, upload progress and download progress of that 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. In the UI, the border radius is named "Corner Radius".
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.
Lines of caption text
Feature flag: FEATURE_TEXT_MAX_LINES_CONTROL
Limits the number of lines of caption text that can be displayed in a text item.
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.
Zoom slider
Feature flag: FEATURE_TIMELINE_ZOOM_SLIDER
Displays a slider at the right-side, just above the timeline, allowing to zoom in and out of the 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 when 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)
While holding Shift when 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 / Marquee selection
Feature flag: FEATURE_CANVAS_MARQUEE_SELECTION
Multiple items can be selected using Cmd/Ctrl+click (alternatively Shift+click) to add items to the selection, or so called Marquee selection to create a selection rectangle that selects all items within its bounds. Selected items can be moved, deleted, or edited together.
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 within the canvas.
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 Cmd/Ctrl 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 |