Remotion — A Framework for Making Videos with React
Programmatic video creation where JSX components become video frames
Remotion is an open-source project created by Jonny Burger in 2021 that applies React's component-based thinking directly to video production.
The core idea is simple: a React component that receives time (frame) as props IS the video. In a 30fps video, frames 0-29 are the first second, 30-59 the second... each frame is rendered with React then encoded with FFmpeg.
The decisive difference from traditional video editing tools (Premiere, After Effects) is programmatic control. Reading 1000 product entries from a database to auto-generate 1000 promotional videos, or dynamically changing video content based on API responses, becomes natural.
For TypeScript/React developers, the biggest advantage is creating videos immediately with existing skills — no new tools to learn.
How It Works
Write a React component and receive the current frame number via useCurrentFrame()
Calculate position, opacity, scale etc. based on frame number → animation expression
Real-time preview + timeline scrubbing in Remotion Studio (localhost:3000)
npx remotion render screenshots each frame in Headless Chrome → FFmpeg encodes to MP4
Pros
- ✓ Leverage React ecosystem as-is: npm packages, component libraries, TypeScript type safety
- ✓ Git version control: video projects managed as code enables diff, PR review, rollback
- ✓ Infinite scaling: render thousands of videos in parallel with Lambda
- ✓ Real-time preview: instant change verification with HMR in Remotion Studio
Cons
- ✗ Learning cost: high entry barrier without React knowledge
- ✗ Rendering speed: Headless Chrome screenshot per frame → minutes for a 1-minute video
- ✗ License: enterprise features (Lambda etc.) require paid license
- ✗ Not suited for live footage editing: specialized for programmatic graphics/motion