Remotion Quickstart

Prerequisites

Node.js 18+
ffmpeg installed on your system

Getting started

npm install          # install dependencies
npm run dev          # start Remotion Studio

Remotion Studio opens at http://localhost:3000 in your browser. If 3000 is already in use, Remotion automatically bumps to 3001, 3002, etc. — watch the terminal output for the actual port number. You can also pin a specific port:

npx remotion studio --port=3001

Commands

Command	What it does
`npm run dev`	Starts Remotion Studio (live preview UI)
`npm run build`	Bundles the project for production
`npx remotion render`	Renders a video from the command line
`npx remotion upgrade`	Upgrades all Remotion packages to latest

Remotion Studio

npm run dev starts the Studio — a browser-based editor where you can:

Preview compositions in real time
Scrub through frames
Change props and see changes instantly
Render videos from the browser

The Studio auto-reloads on file changes. No manual refresh needed.

Project structure

.
├── src/
│   ├── index.ts          # Entry point — calls registerRoot()
│   ├── Root.tsx          # React root component
│   ├── Composition.tsx   # Composition definitions (placeholder)
│   └── lrc2srt.ts        # LRC → SRT subtitle converter
├── package.json          # Remotion + React + Tailwind deps
├── remotion.config.ts    # CLI config (rspack, jpeg output format)
├── tsconfig.json         # TypeScript (strict, ES2018)
└── ffmpeg.sh             # Helper for ASS subtitle baking

Compositions

Compositions are defined in src/Composition.tsx. Each has:

id — unique name
durationInFrames — length in frames
fps — frames per second
width/height — resolution

The placeholder is 1280×720 at 30fps, 60 frames (2 seconds).

Rendering a video

npx remotion render src/index.ts MyComp out/video.mp4

Replace MyComp with your composition ID. The output goes to out/.

2.4 KiB Raw Permalink Blame History Unescape Escape