Remotion: Create Videos Programmatically with React

Key Takeaway

Remotion is a framework that lets us create videos programmatically using React components instead of traditional video editing software. Created by Jonny Burger, it enables developers to leverage their existing React skills to generate videos at scale, with version control and automation built in.

What is Remotion?

Remotion is a revolutionary framework that transforms how we approach video production by enabling us to create videos using code. The project remotion-dev/remotion solves the problem of generating videos at scale that we all face when traditional video editing software doesn't support automation or version control.

Instead of dragging clips on a timeline in After Effects or Premiere Pro, we write React components with JSX, CSS, and JavaScript. Remotion then renders these components frame by frame into actual video files - MP4, WebM, or audio formats.

The Problem We All Know

We need to create video content at scale. Product demos for every customer. Personalized videos for marketing campaigns. Data visualizations that update daily. Educational content with varying parameters.

Traditional video editing software fails us here. We can't version control After Effects projects meaningfully. We can't automate Premiere Pro workflows without complex scripting. And hiring video editors to manually create thousands of variations? That's neither scalable nor cost-effective.

Existing solutions involve exporting data to motion graphics templates, manually updating parameters, or building custom rendering pipelines from scratch using tools like FFmpeg directly - which requires deep video encoding knowledge most of us don't have.

How Remotion Works

Remotion bridges the gap between code and video by treating video creation as a development task. Think of it like this: a video becomes a React application that renders frame by frame instead of once.

We get access to the current frame number through hooks like useCurrentFrame(). This lets us create time-based animations using familiar JavaScript logic. CSS animations translate directly to video animations. We can import assets - images, videos, fonts, audio - just like in any React app.

Under the hood, Remotion uses Webpack for bundling our code, Babel for transpilation, and FFmpeg for the actual video encoding. But we never interact with FFmpeg directly - Remotion abstracts all the complexity.

Quick Start

Here's how we get started with Remotion:

# Install Remotion
npm init video

# This creates a new Remotion project
cd my-video
npm start

# Preview in browser at localhost:3000
# Render video when ready
npm run build

A Real Example

Let's say we want to create a simple fade-in animation for a title card:

import {useCurrentFrame, useVideoConfig} from 'remotion';

export const TitleCard = ({title}) => {
  const frame = useCurrentFrame();
  const {fps} = useVideoConfig();
  
  // Fade in over 1 second (30 frames at 30fps)
  const opacity = Math.min(1, frame / fps);
  
  // Move up from bottom
  const translateY = Math.max(0, 50 - frame);
  
  return (
    

      {title}
    
  );
};

Now we can render this with different titles:

import {Composition} from 'remotion';
import {TitleCard} from './TitleCard';

export const RemotionRoot = () => {
  return (
    <>
      
    
  );
};

Key Features

• Real-time preview - See our video update live as we code, with hot reloading. Think of it like Create React App but for videos.
• Composition system - Create reusable video templates with parameters. We can render the same composition with different props to generate variations at scale.
• Server-side rendering - Deploy to Lambda functions and render videos programmatically. Perfect for generating personalized content on demand.
• Full React ecosystem - Use any npm package, TypeScript, hooks, and modern React patterns. Our entire web development toolkit applies to video.
• Timeline control - Access frame numbers and timing information to create precise animations without guessing.
• Asset management - Import images, videos, audio, and fonts just like in a web app. No special video editing workflows needed.

When to Use Remotion vs. Alternatives

Traditional video editing tools like After Effects and Premiere Pro excel at creative, one-off productions where designers need fine-grained control and visual feedback. They're the right choice for high-end motion graphics, complex compositing, and artistic projects.

Remotion shines when we need automation, scale, or programmatic generation. If we're generating videos from data, need version control for video projects, or want to create thousands of personalized variations, Remotion is the better tool.

Compared to tools like Lottie (for animations) or motion graphics templates, Remotion offers more flexibility and control. We're not limited to predefined parameters - we can write arbitrary JavaScript logic to control every aspect of our video.

Tools like FFmpeg directly give us maximum control but require deep video encoding knowledge. Remotion abstracts the complexity while still leveraging FFmpeg's power under the hood.

My Take - Will I Use This?

In my view, Remotion represents a fundamental paradigm shift in how we approach video production. The ability to version control video projects through Git, automate generation through code, and leverage our existing development skills is game-changing.

I'll use this for any project that needs video generation at scale - marketing automation, data visualization videos that update with fresh data, personalized content, or educational materials with variations. The fact that we can treat videos as code means we can apply all our software development best practices: testing, CI/CD, code review, and more.

The limitation is clear: this isn't a replacement for creative video editing. If we need a designer to craft beautiful motion graphics with artistic control, After Effects is still the tool. Remotion requires programming knowledge - specifically React - which creates a learning curve.

But for developer-driven video content? This changes everything. Check out the project at remotion-dev/remotion.

Frequently Asked Questions

What is Remotion?

Remotion is a framework that enables developers to create videos programmatically using React components, JSX, and CSS instead of traditional video editing software.

Who created Remotion?

Remotion was created by Jonny Burger, who founded the project in January 2021 to bring the React paradigm to video production.

When should we use Remotion?

Use Remotion when you need to generate videos at scale, automate video production, create data-driven videos, or want version control for video projects. It's perfect for developers who need programmatic video generation.

What are the alternatives to Remotion?

Alternatives include traditional video editing software (After Effects, Premiere Pro) for creative projects, motion graphics templates for limited automation, FFmpeg directly for maximum control, and Lottie for animations. Each serves different use cases.

What are the limitations of Remotion?

Remotion requires React and programming knowledge, so it has a learning curve for non-developers. It's not ideal for one-off creative projects that need traditional video editing workflows or fine-grained artistic control that designers prefer in visual tools.