Getting Started

Let's get you from zero to rendered video. This guide walks through creating your first composition using the web editor.

Create an account

Head to program.video and sign in with your account. First-time users automatically get an organization created. This is where your projects and components live.

Start a new project

From your dashboard, you'll see a prompt: "What's your next video about?"

You have two options:

Quick start with a prompt. Type something like "A 30-second explainer about our new feature" and hit enter. The AI will create a project and start planning scenes for you. Use a template. Browse the templates below the prompt. Each template is a pre-built workflow optimized for specific video types. Click a template to configure it with your specific details, then run it.

The editor interface

Once your project is created, you'll land in the editor. Here's what you're looking at:

Left panel – AI Chat

This is where you talk to the AI assistant. Describe changes you want:

"Add a title card at the beginning"
"Make the intro 2 seconds longer"
"Change the background to dark blue"

The assistant understands video composition and will make changes directly to your project.

Center panel – Preview & Code

Toggle between two views:

Video mode shows your composition playing in real-time. Changes appear here immediately after the AI makes them. Code mode lets you edit the React/Remotion code directly. Use this for precise tweaks or when you know exactly what you want.

Bottom panel – Timeline

The timeline shows all your scenes as blocks. You can:

Click a scene to select it
Drag a scene to reposition it
Resize scenes by dragging their edges
Double-click to edit the scene's code

Making your first edit

Let's try something simple. In the chat panel, type:

Add an intro scene with the text "Hello World" centered on a white background

Watch what happens:

1. The AI acknowledges your request 2. It creates a new scene with React code 3. The scene appears in your timeline 4. The preview updates to show your new intro

Editing scenes

Want to change something? You have options:

Ask the AI. Just describe what you want different: "Make the text bigger and blue" Edit the code directly. Click the code icon on a scene in the timeline, or toggle to code view in the center panel. You'll see standard React code using Remotion:

export default function IntroScene() {
  return (
    <AbsoluteFill style={{ backgroundColor: "white" }}>
      <h1 style={{ fontSize: 72, textAlign: "center" }}>
        Hello World
      </h1>
    </AbsoluteFill>
  );
}

Adjust timing. Drag the edges of scenes in the timeline to change their duration, or edit the duration directly in the scene's settings.

Adding audio

Videos without sound feel incomplete. Add narration with:

Generate speech saying "Welcome to our product demo"

The AI will create an audio scene using text-to-speech. You can also upload your own audio files.

Previewing and playback

Use the playback controls in the timeline:

Play/Pause – Space bar or click the play button
Seek – Click anywhere on the timeline ruler
Frame-by-frame – Arrow keys for precise positioning

The preview renders in real-time as you make changes.

Exporting your video

When you're happy with your composition, click Export in the top right. Your video renders in the cloud using Remotion Lambda and downloads as an MP4.

Keyboard shortcuts

A few shortcuts to speed up your workflow:

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

Next steps

You've got the basics down. Here's where to go next:

Learn about the Editor in depth
Explore Templates for pre-built workflows
Build reusable Components
Set up Integrations for AI providers

Stuck on something? The AI assistant in the editor is there to help. Just ask.