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
TODO
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
TODO
Drag and dropping
TODO
Automatic duration
TODO
Multi-select
TODO
Splitting items
TODO
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
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
TODO
Font size
Feature flag: FEATURE_TEXT_FONT_SIZE_CONTROL
Allows setting the font size of the item.
Text value
TODO
Color
TODO
Rotation
Feature flags: FEATURE_ROTATION_CONTROL and FEATURE_ROTATE_90_DEGREES_BUTTON
Line height
TODO
Letter spacing
TODO
Right to left
TODO
Playback speed
TODO
Volume
TODO
Fade in and out
Playback
Play / Pause button
TODO
Current time indicator
TODO
Fullscreen button
TODO
Mute button
TODO
Loop
TODO
Canvas
Click to select
TODO
Move and resize
TODO
Shift axis lock
TODO
Shift aspect ratio lock
TODO
Multiple selection
TODO
Marquee selection
TODO
Dropping assets
TODO
Zoom
TODO
Pinch to zoom / Ctrl + mouse wheel to zoom
TODO
Plus and minus buttons
TODO
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) | |
| ⌘/CtrlA | Select all items | |
| Delete | Delete selected item(s) | FEATURE_BACKSPACE_TO_DELETE |
Copy and paste
TODO
Bring to front / Send to back
Behaviors
Cut, copy, paste, duplicate
TODO
Save and load
TODO
Asset uploads
TODO
Undo and redo
TODO
Asset caching
TODO
Rendering
Remotion integration
TODO
Render button
TODO
Captioning
OpenAI Whisper integration
TODO