How to Preview and Edit Videos with Remotion Studio: A Complete Guide

Remotion Studio is a visual editor that runs as a local web application, allowing you to preview React-based video compositions in real time and edit props, keyframes, and layers before rendering the final output.

The remotion-dev/remotion repository ships with @remotion/studio, a dedicated package that provides the same rendering pipeline as the CLI (remotion render) but wraps it in an interactive React-based interface. This guide explains how the preview and editing architecture works, how to start the studio from your project, and how to leverage its core features for video production.

What Is Remotion Studio?

Remotion Studio is not a separate binary but a Node.js server that serves a React application. It communicates with a headless Chromium instance to render frames on demand, giving you a frame-accurate preview of your React components without writing intermediate video files.

The Three-Layer Architecture

The studio is built on three distinct layers that handle the user interface, communication, and rendering:

Layer	Responsibility	Key Source File
UI (React)	Renders the timeline, preview window, property panels, and drag-and-drop assets. Built with React and styled-components.	packages/remotion-studio/src/Studio.tsx
Bridge (WebSocket)	Provides a bi-directional channel between the UI and the Node.js renderer process. Forwards PLAY, SEEK, and RENDER commands.	packages/remotion-studio/src/Bridge.ts
Renderer (Remotion core)	Executes the user's composition inside headless Chromium. Reuses the same code path as remotion render, returning frames as PNG data.	packages/remotion/src/render/renderMedia.ts

How the Preview System Works

When you click Play or drag the playhead in Remotion Studio, the system executes a real-time frame rendering loop. Unlike traditional video editors that decode pre-rendered files, Remotion generates each frame on demand using your React code.

The preview workflow follows these steps:

1. Studio UI captures the user action (play or seek) and dispatches a Redux action defined in packages/remotion-studio/src/state/sceneSlice.ts.
2. Bridge serializes the command as a JSON message and sends it over the WebSocket connection to ws://localhost:3000/bridge.
3. Renderer receives the message and invokes renderFrameAt (internally part of renderMedia.ts), which evaluates your React component at the requested frame number inside a headless Chromium instance.
4. UI Update returns the rendered frame as a base64-encoded PNG, which the Studio decodes and paints onto an HTML <canvas> element in the preview pane.

Because the system renders only one frame at a time, the round-trip latency remains under a few hundred milliseconds, providing a near-real-time editing experience that stays synchronized with your code changes.

Editing Videos in Remotion Studio

Beyond passive previewing, Remotion Studio provides interactive tools for modifying your video without editing source code directly. These edits are stored in a JSON state file and can be exported back to code or rendered directly.

Editing Component Props

The Layers panel in packages/remotion-studio/src/Studio.tsx displays the React component hierarchy of your composition. When you select a layer, the Props panel (implemented in packages/remotion-studio/src/PropsEditor.tsx) renders input fields for each prop defined in your component's TypeScript interface.

Changing a value in the Props panel triggers an immediate re-render of the preview canvas. For example, modifying a text prop will instantly update the text overlay in the video preview without restarting the server.

Working with Keyframes

For animated properties, Remotion Studio provides a visual keyframe editor stored in remotion-studio-state.json. The Timeline component (packages/remotion-studio/src/Timeline.tsx) renders draggable keyframe markers.

When you add a keyframe:

1. The UI dispatches an action to the Redux store (packages/remotion-studio/src/store.ts).
2. The state reducer in packages/remotion-studio/src/state/sceneSlice.ts updates the keyframe array for the selected property.
3. The bridge notifies the renderer to re-evaluate the composition with the new animation curve.

Keyframes persist across sessions because the store uses persistState.ts to write changes to disk automatically.

Rendering the Final Output

When your composition is ready for export, clicking the Render button initiates the same pipeline used by the CLI. The RenderProgress.tsx component (packages/remotion-studio/src/RenderProgress.tsx) displays a progress bar and estimated time remaining.

The render request includes:

• Output file path
• Codec selection (H.264, HEVC, VP8, etc.)
• Frame range and concurrency settings

The bridge forwards this to renderMedia.ts, which spawns the full rendering pipeline across all frames, writing the final video file to disk rather than returning individual PNGs to the UI.

Getting Started: Code Examples

To start previewing and editing your videos, install the studio package and run the local server.

Installation and Startup

# Install the studio package in an existing Remotion project

npm install -D @remotion/studio

# Add a script to package.json

# "scripts": { "studio": "remotion studio" }

# Launch the editor

npm run studio

By default, the studio serves on http://localhost:3000. The command automatically opens your default browser unless you specify --no-open.

Basic Composition Setup

Ensure your project exports a composition that the studio can detect:

// src/Video.tsx
import {Composition} from 'remotion';
import {MyVideo} from './MyVideo';

export const RemotionVideo = () => (
  <>
    <Composition
      id="MyVideo"
      component={MyVideo}
      durationInFrames={150}
      fps={30}
      width={1280}
      height={720}
      defaultProps={{
        titleText: 'Hello World',
        titleColor: '#000000',
      }}
    />
  </>
);

When you select the "MyVideo" composition in the studio sidebar, the preview pane will render frame 0 using the defaultProps.

Programmatic Control

For advanced use cases, such as integrating the studio into a custom toolchain, import the Node.js API directly:

import {runStudio} from '@remotion/studio';

await runStudio({
  port: 4000,                // Custom port to avoid conflicts
  openBrowser: true,         // Auto-open browser tab
  projectPath: __dirname,    // Directory containing Video.tsx
  logLevel: 'verbose',       // Debug WebSocket messages
});

This approach is useful when building automated editing environments or when you need to run the studio on a remote development server with port forwarding.

Summary

• Remotion Studio is a React-based visual editor included in the @remotion/studio package that provides real-time preview and editing capabilities for React video compositions.
• The architecture relies on a WebSocket bridge (Bridge.ts) to communicate between the UI and a headless Chromium renderer, ensuring the preview matches the final output exactly.
• Editing features include a props panel for live component updates, a timeline for keyframe animation, and persistent state storage in remotion-studio-state.json.
• Rendering uses the same core pipeline as the CLI (renderMedia.ts), guaranteeing consistency between the preview and exported video files.
• You can launch the studio via the CLI (remotion studio) or programmatically using the runStudio() API for custom integrations.

Frequently Asked Questions

How does Remotion Studio differ from the CLI renderer?

Both tools use the identical rendering engine defined in packages/remotion/src/render/renderMedia.ts. The CLI (remotion render) processes the entire video frame range sequentially and writes directly to disk, while Remotion Studio renders individual frames on demand via a WebSocket bridge to provide an interactive preview. The studio also adds a stateful editing layer for props and keyframes that the CLI does not provide.

Can multiple developers collaborate on the same Remotion Studio project?

Currently, Remotion Studio is designed as a single-user local application. The Redux store in packages/remotion-studio/src/store.ts persists state to a local JSON file (remotion-studio-state.json), not a shared database. However, because all edits are stored as JSON, you can commit this file to version control (e.g., Git) to share keyframe data and prop configurations with teammates, who can then load the same state when they run the studio locally.

Why is my preview lagging or showing black frames?

Preview performance depends on the complexity of your React components and the speed of the WebSocket communication between the UI and the renderer. If the headless Chromium instance in the renderer layer cannot generate frames fast enough, the UI will display stale or black frames while waiting for the base64 PNG response. To improve performance, simplify component renders, reduce the preview resolution, or ensure your development machine has sufficient CPU resources for the Chromium process spawned by renderMedia.ts.

Is it possible to extend Remotion Studio with custom plugins?

While Remotion Studio does not yet support a formal plugin API, the codebase is modular Redux-based React. You can fork the repository and modify components like Studio.tsx or PropsEditor.tsx to add custom panels or property controls. Because the studio communicates via the WebSocket bridge defined in Bridge.ts, you can also intercept or extend messages between the UI and renderer to implement custom preview behaviors or external tool integrations.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}