Using the Video Editor

The editor is where you write Remotion composition code, preview frames, and render videos.

Editor Layout

• Top Bar — Project name, back button, Templates, Media Library, Settings, and Render controls
• Left Panel (AI Chat) — AI assistant that can generate and modify Remotion code
• Center Panel (Code Editor) — Monaco code editor with TypeScript/JSX support and syntax highlighting
• Preview Tab — View still frames or rendered video output

Code Editor

The code editor uses Monaco (same engine as VS Code) with full TypeScript support:

• Syntax highlighting for TypeScript and JSX
• Auto-complete for Remotion APIs (AbsoluteFill, useCurrentFrame, interpolate, etc.)
• Ctrl+S to save
• Auto-save on AI code apply

Preview

Click the Preview button to generate a still frame of your composition. You can specify which frame to preview and use the preview tab to view the result.

Composition Code

Your code must export a UserComp component that uses Remotion APIs:

• useCurrentFrame() — Get the current frame number
• useVideoConfig() — Get FPS, width, height, duration
• interpolate() — Animate values between keyframes
• spring() — Spring-based animation easing
• AbsoluteFill — Full-frame container
• Sequence — Time-offset sections