Your complete guide to navigating the Remotion Studio interface, previewing compositions in real-time, editing props visually, and mastering keyboard shortcuts for a faster workflow.
Get familiar with the Studio's layout and understand how each panel contributes to your video development workflow.
Start the Remotion Studio from your project directory with npx remotion studio. The Studio opens in your default browser at localhost:3000. Use --port 3001 to specify a custom port.
The left sidebar displays all registered compositions. Each entry shows the composition ID, duration (frames and time), and dimensions (width × height in pixels).
The central preview area renders your composition in real-time. This is where you'll see your video come to life as you make changes to your code.
The right sidebar displays editable controls when you define your composition props using a Zod schema. This enables visual editing without touching code.
The timeline at the bottom shows the full duration of your composition. Sequences and layers are visualized here, making it easy to understand your video's structure.
The Studio renders your composition in real-time as you make changes. Edit your React components, save the file, and see changes instantly in the preview—no manual refresh needed.
Learn how to control video playback, navigate through frames, and preview your compositions at different speeds.
Use the spacebar or click the play button to toggle playback. The preview renders in real-time, so you can see exactly how your video will look when exported.
Drag the playhead along the timeline to jump to any frame instantly. This is useful for checking specific moments in your composition without playing through the entire video.
Adjust playback speed using J (slower) and L (faster) keys. This helps you review animations in slow motion or quickly scan through longer compositions.
Use the left and right arrow keys to step through your composition one frame at a time. This precision is essential for fine-tuning animation timing and transitions.
Harness the power of visual props editing to experiment with different values without modifying your source code.
Define your composition props using a Zod schema to enable visual editing. The Studio automatically generates form controls based on your schema types.
Create a schema using z.object() that describes your composition's configurable properties. Include types like z.string(), z.number(), and z.boolean() for different control types.
Pass your schema to the Composition component along with defaultProps. The Studio will display editable controls in the right sidebar for each property defined in your schema.
The Studio generates appropriate controls based on your schema: text fields for strings, number sliders for numeric values, color pickers for color strings, checkboxes for booleans, and dropdowns for enums.
After adjusting props in the Studio, click the save icon to update your defaultProps in the source file. This bridges the gap between visual experimentation and code.
Master the timeline to understand your composition's structure and navigate precisely to any point in your video.
The timeline displays your composition's full duration with visual markers for sequences and layers. This bird's-eye view helps you understand the overall structure.
Press Home to jump to the first frame or End to jump to the last frame. These shortcuts are essential for quickly reviewing the beginning and end of your composition.
The current frame number is displayed in the timeline controls. Use this to note specific frames for animation timing or to communicate precise moments with collaborators.
When your composition uses Sequence components, the timeline shows each sequence as a distinct block. This makes it easy to see how different parts of your video are organized.
The timeline shows both frame count and time duration. For a 30fps composition with 150 frames, you'll see both '150 frames' and '5.0s' displayed.
Zoom in on the timeline to see more detail for precise frame selection, or zoom out to see the full composition at a glance.
Speed up your workflow with essential keyboard shortcuts and productivity techniques for efficient video development.
Master these keyboard shortcuts to dramatically speed up your Studio workflow.
| Shortcut | Action |
|---|---|
| Space | Play/Pause |
| ← / → | Previous/Next frame |
| J / L | Decrease/Increase speed |
| Home | Jump to start |
| End | Jump to end |
Click the 'Render' button to open the render dialog. Choose output format, set quality options, configure output location, and monitor render progress—all without leaving the Studio.
Follow these practices to get the most out of Remotion Studio and maintain an efficient development workflow.
Use the Studio's built-in render interface for quick preview renders during development. This is often faster than typing CLI commands for iterative testing.
Continue exploring with these related guides and tutorials.
Now that you understand the Studio interface, explore our template library to find the perfect starting point for your next video project.