Remotion: Make Videos with React Code (2026 Guide)

Remotion is a framework that lets you create real videos — MP4s, WebMs, GIFs — by writing React code instead of dragging clips around a timeline. Every animation is a function of the frame number, so your videos are deterministic, easy to version-control, and simple to generate in bulk from data. You preview your work in a browser-based Studio, then render headlessly with Chromium and FFmpeg — or scale out across hundreds of machines on AWS Lambda. It is free for individuals and tiny teams, with paid company licenses for larger organizations. In this guide, we break down remotion making videos code in plain English — what it is, how it works, and how to use it.

If you already write React, Remotion turns video production into a programming problem — and programming problems are exactly what developers are good at solving.

Remotion Making Videos Code: What is Remotion, exactly?

Remotion is an open-source-style framework (with a custom license) for creating videos programmatically with React. You describe scenes as React components, preview them in a live Studio, and Remotion renders each frame in a headless browser, then encodes the frames into a finished video file.

Traditional video tools think in timelines: you drag clips, set keyframes, and eyeball the timing. Remotion thinks in functions: at 30 frames per second, frame 90 is exactly the 3-second mark, and everything on screen is computed from that number. Change the data, re-render, and you get a new video — no manual re-editing.

The project began in 2021 as a source-available GitHub project and is now a Zurich-based company; its repository has since grown past 60,000 stars. github.com/remotion-dev/remotion

How does Remotion turn React code into an MP4?

The core idea is beautifully simple: a video is just React components rendered one frame at a time. Here is the pipeline:

1. Compose. You write a React component and register it as a composition — an id, dimensions (say 1920×1080), frame rate (say 30fps), and duration in frames. Animation comes from hooks like useCurrentFrame(), which returns the current frame number, plus helpers like interpolate() (map frames to values) and spring() (natural springy motion).
2. Preview. Run the dev server and open Remotion Studio in your browser, where you can scrub through the timeline and tweak props live.
3. Render. Remotion opens your project in headless Chromium, captures every frame as an image, and encodes the sequence into video with FFmpeg. The renderMedia() API in @remotion/renderer drives this from Node.js, with options for codec (H.264 and more), quality, GIF output, stills, and audio-only exports. Remotion docs: renderMedia()

A tiny example shows the mental model. To fade text in over one second at 30fps:

const frame = useCurrentFrame(); // 0, 1, 2, …
return <div style={{ opacity: frame / 30 }}>Hello</div>;

Because the same frame number always produces the same pixels, renders are fully reproducible.

What can you actually build with Remotion?

Remotion shines wherever videos follow a pattern — the same structure, different content. Common uses include:

• Product demos and explainers generated from copy and screenshots
• Data-driven videos — think Spotify-Wrapped-style year-in-review clips built from a database
• Personalized video ads — one template, thousands of variants with different names, prices, or images
• Audiograms and social clips — waveform animations over podcast audio, captioned reels
• Video apps — the @remotion/player package lets you embed a Remotion composition inside any React app and change its content at runtime via props, so users can customize and preview video in the browser. Remotion docs: Player

For freelancers, the leverage is templates as products: one great animated template can serve many clients without re-editing by hand.

How do you get started with Remotion?

You need Node.js 16+ (or Bun) on your machine — note the docs currently require macOS 15 (Sequoia) or later on Macs. Then:

1. Scaffold a project: run npx create-video@latest and pick a template (Hello World is the gentlest start).
2. Open the Studio: run npm run dev to preview your video in the browser.
3. Edit the composition: change the React code in src/, scrub the timeline, and iterate like you would on a web page.
4. Render: run the render command to export your MP4.

There is also a newer, faster path: Remotion publishes official Agent Skills so coding agents like Claude Code or ChatGPT can write correct Remotion code for you — you describe the video in plain language (“a 30-second launch video with a logo animation and a CTA”), and the agent scaffolds the components. Remotion docs: getting started

Remotion vs. traditional video editors: how do they compare?

The honest takeaway: Remotion does not replace a video editor. It replaces the boring, repetitive parts of video production — the tenth nearly-identical promo cut, the weekly stats video, the localized ad variants.

Is Remotion free? Understanding the license

This is the part most tutorials skip, and it matters. Remotion’s source is public on GitHub, but it uses a custom license — not MIT. The tiers, as listed on the official site:

• Free License — for individuals and companies of up to 3 people. All features included, unlimited commercial use. You must upgrade if your organization grows.
• Company License — required for companies of 4+ people. Two flavors: Creators at $25/month per seat, or Automators at $0.01 per render with a $100/month minimum.
• Enterprise License — from $500/month, with private support channels and custom terms.

Pricing can change, so confirm the live numbers before committing a client project to it. remotion.dev The practical rule for freelancers: solo work and tiny teams are covered by the free license; the moment a 4+ person client is involved, the company license question needs an answer up front — What Is Open Source Software? A Beginner’s Guide explains why “public source code” and “free to use however you like” are not the same thing.

Should you use Remotion for your next project?

Reach for Remotion when: you already know React, the video follows a repeatable template, content comes from data or an API, you need many variants, or you want video generation inside an app or CI pipeline.

Skip it when: you are cutting live-action footage, making a single one-off video (the setup overhead is not worth it), or nobody on the team writes JavaScript.

For freelancers the business case is leverage: a template that renders a polished client video from a spreadsheet in minutes turns one effort into fifty videos.

Frequently asked questions

Do I need to know React to use Remotion?

Comfortably, yes — Remotion is a React framework, so components, props, and hooks are the working vocabulary. That said, the official Agent Skills teach coding agents to write correct Remotion code, so you can describe a video in plain language and have an AI draft the components for you to review.

Is Remotion really free for commercial use?

For individuals and companies with up to 3 people, yes — the free license includes all features with unlimited commercial use. Larger organizations need a paid company license, starting with a $25/month-per-seat creator tier. Check the current terms on the official site before shipping client work.

Can Remotion replace Premiere Pro or After Effects?

No — and it is not trying to. Those tools excel at editing footage and hand-crafted motion design. Remotion excels at programmatic, data-driven, and bulk video. Many teams use both: Remotion for the templated volume work, traditional editors for the hero pieces.

What video formats can Remotion export?

MP4 (H.264 and other codecs), WebM, animated GIFs, still images, and audio-only files — all driven by the renderMedia() options in @remotion/renderer.

How do I render videos at scale?

Use @remotion/lambda: it deploys your project to AWS, fans out rendering across many Lambda functions in parallel — each rendering a slice of the video — then stitches the slices and uploads the finished file to S3. The docs describe it as the fastest, most scalable option, with most users rendering minutes of video for just a few pennies of AWS cost. Remotion docs: Lambda

Can I use Remotion if I don’t want to pay for AWS?

Yes. Lambda is optional — you can render entirely on your own machine or server with the standard renderer. Cloud rendering is for scale; local rendering works fine for one-off or low-volume work.

Related reading

• What Is Open Source Software? A Beginner’s Guide
• Python 3.15: What’s New and Why It Matters
• What Is Observability? Logs, Metrics, Traces Explained