Make Videos Programmatically With React: What Remotion Is and Why It Matters
Remotion is a React framework for creating videos with code — use all of CSS, Canvas, SVG, WebGL, and the full React ecosystem to build videos that would be impossible to create manually in a video editor.
Last updated: June 15, 2026
Remotion is a React framework for creating videos with code — use all of CSS, Canvas, SVG, WebGL, and the full React ecosystem to build videos that would be impossible to create manually in a video editor.
This guide is reviewed for clarity, service accuracy, and AI-search readability. The next quarterly content review is tracked internally before unsupported metrics or client proof are added.
What Remotion is
Remotion is an open-source React framework for creating videos programmatically. Instead of clicking through a timeline in a video editor, you write React components that render as video frames.
The output is a real video file. The inputs are React, CSS, JavaScript — the same tools you already use for web development. Because it's code, you can use variables, functions, APIs, external data, and algorithms to create effects that would be impossible to produce frame-by-frame in a traditional editor.
Getting started
bashnpx create-video@latest
This scaffolds a new Remotion project with a working example composition. Requires Node.js.
Why create videos in React
- Use all of CSS — animations, transforms, gradients, blend modes. If it renders in a browser, it renders in Remotion.
- Use Canvas, SVG, and WebGL — the full graphics stack, not just what a video editor's effects library exposes.
- Use programming constructs — variables, loops, conditionals, math. A bar chart that animates from real data. A video that changes based on a URL parameter.
- Use React's component model — reusable components for intro cards, lower thirds, transitions. Build a template once; render it 10,000 times with different data.
- Use the full npm ecosystem — any package that works in a browser works in Remotion.
What people build with it
Two prominent showcase examples: GitHub Unwrapped (personalized year-in-review videos from GitHub API data — a unique video per user) and a Fireship video built with code. Both are examples of programmatic video at scale.
Common use cases:
- Personalized videos at scale — unique video per user from a data source
- Data visualizations as video — animated charts and reports from live data
- Branded social content — templated intro cards and lower thirds from a CMS
- Developer content — code walkthroughs with syntax-highlighted code that types itself
- AI-generated video — AI generates the content, Remotion assembles it with consistent formatting
How the rendering model works
Remotion renders video by running your React components in a headless Chromium instance, capturing each frame, and encoding the sequence as a video file. The rendering is frame-accurate and deterministic — the same code produces the same output every time.
The development experience uses React Fast Refresh — changes appear in a browser preview instantly. When ready, run the render command and get an MP4 out.
Licensing
Free for individuals and small projects. Companies above a certain revenue threshold require a commercial license. Read LICENSE.md before using for commercial work — the terms are more restrictive than typical MIT or Apache licenses.
Frequently asked questions
Do I need to know React to use Remotion? Yes. The mental model: your component receives a
frameHow does Remotion compare to CapCut, Premiere, or Runway? Remotion is a code-first developer tool; those are visual editors. Remotion is the right choice when you need to generate many variations of a video from data, want version-controlled video templates, or need logic that would be tedious to produce manually.
Can Remotion render videos in the cloud? Yes. Remotion Lambda deploys rendering to AWS Lambda for serverless cloud rendering — useful for on-demand generation at scale. Requires an AWS account. The core framework is free; Lambda has usage-based AWS costs.