Editor

The editor is where your videos come together. It combines a live preview, visual timeline, code editor, and AI assistant in one unified workspace.

Layout overview

The editor adapts to your workflow with three main areas:

Chat panel (left)

Your AI assistant lives here. It has direct access to your composition and can make changes as you describe them.

Starting a conversation. Each project can have multiple chat threads. Click "New Chat" to start fresh, or continue a previous conversation. The AI maintains context about your project across messages. File attachments. Drag images or documents into the chat to reference them. The AI can use these for inspiration, extract text, or incorporate them into your scenes. Model selection. Different models have different strengths. The dropdown lets you pick which AI powers your assistant.

Preview panel (center)

This shows your video in real-time. As scenes change, the preview updates immediately. No waiting for renders.

Video mode plays your composition. Use the playback controls to scrub through, or just watch it play. Code mode shows the React/Remotion code for the currently selected scene. Edit directly here for precise control.

Toggle between modes with the buttons in the top-right of the panel.

Timeline (bottom)

The timeline displays all scenes as horizontal blocks. Time flows left to right.

Selecting scenes. Click a scene block to select it. The selected scene gets an orange border and its code appears in code mode. Reordering. Drag scenes left or right to change their position in the video. Resizing. Drag the left or right edge of a scene to change its duration. The timeline automatically adjusts subsequent scenes. Layers and Activity tabs. Switch between the visual timeline (Layers) and a log of workflow executions (Activity).

Working with scenes

Scenes are the atomic units of your composition. Each scene has:

A type: code, video, audio, or transition
A duration: how long it appears
A start time: when it begins in the overall video
Content: the actual code, file, or configuration

Adding scenes

Several ways to add new scenes:

Ask the AI. "Add a scene with a bouncing logo" creates a code scene with the component code written for you. Click the add button. The "New Layer" button in the timeline creates a blank scene you can customize. Copy and paste. Select a scene, Cmd/Ctrl + C to copy, then Cmd/Ctrl + V to paste a duplicate.

Editing code

Code scenes are React components. Here's a typical scene:

import { AbsoluteFill, useCurrentFrame, interpolate } from "remotion";

export default function FadeInTitle() {
  const frame = useCurrentFrame();
  const opacity = interpolate(frame, [0, 30], [0, 1]);

  return (
    <AbsoluteFill style={{
      backgroundColor: "#1a1a1a",
      justifyContent: "center",
      alignItems: "center"
    }}>
      <h1 style={{
        color: "white",
        fontSize: 64,
        opacity
      }}>
        Welcome
      </h1>
    </AbsoluteFill>
  );
}

You have access to Remotion's full API:

useCurrentFrame() – Current frame number
useVideoConfig() – FPS, dimensions, duration
interpolate() – Smooth value transitions
spring() – Physics-based animations
Sequence – Nest timed segments
And much more

Adjusting timing

Fine-tune when scenes appear:

Visual dragging. Drag scene edges in the timeline for quick adjustments. Duration input. Click on a scene's duration in the timeline to type an exact value. AI commands. "Make the intro 2 seconds longer" or "Start the outro at 15 seconds."

Playback controls

The control bar above the timeline includes:

Play/Pause – Orange button toggles playback
Current time – Shows exact frame and seconds
Undo/Redo – Step through your edit history (up to 50 actions)

The timeline ruler shows the full duration. Click anywhere on it to jump to that time.

Keyboard shortcuts

Action	Shortcut
Play/Pause	`Space`
Undo	`Cmd/Ctrl + Z`
Redo	`Cmd/Ctrl + Shift + Z`
Delete scene	`Delete` or `Backspace`
Copy scene	`Cmd/Ctrl + C`
Paste scene	`Cmd/Ctrl + V`

AI assistant capabilities

The in-editor AI can:

Plan compositions. Describe a video concept and it will create a multi-scene structure with appropriate timing. Write scene code. Ask for specific animations, layouts, or effects. The AI writes Remotion components that work out of the box. Edit existing scenes. "Make the text bigger" or "Change the animation to slide in from the left" modifies scenes in place rather than recreating them. Generate speech. "Add narration saying 'Welcome to our demo'" creates audio scenes with text-to-speech. Run templates. "Use the product launch template" executes workflow templates to generate full compositions.

The AI prioritizes surgical edits over regeneration. It won't destroy your work to make a small change.

Versions

Every significant change creates a new version. Access previous versions from the dropdown in the header. This is your safety net. Experiment freely knowing you can always go back.

Exporting

When your video is ready:

1. Click Export in the top-right 2. Your composition renders in the cloud 3. Download the MP4 when complete

Rendering uses Remotion Lambda for fast, scalable video processing.

Mobile considerations

The editor works on mobile with an adapted layout:

Panels stack vertically
Toggle buttons switch between chat and editor views
Touch-friendly tap targets

For serious editing work, we recommend a desktop browser.

Next up: Learn how Templates can jumpstart your video creation with pre-built workflows.