How to Build Video with Remotion: Complete React Tutorial

You write React components that describe each frame, and Remotion renders them into video files. If you need to generate dozens of variations from a spreadsheet or API—personalised clips, daily news summaries, templated social posts—this is faster than a timeline editor. If you are making one video, use Premiere or DaVinci.

This tutorial covers project structure, animation patterns, rendering costs, and the technical limits that will slow you down. You should be comfortable reading React code.

What Remotion is and is not

Remotion is a Node.js library that uses Chromium to render each frame of your video. You define components that accept a frame prop (an integer counting up from zero), and you use that number to drive CSS transforms, opacity changes, or conditional rendering. Remotion handles the frame capture, audio encoding, and final video assembly.

It is not a no-code tool. You need to write React. It is also not a real-time video player—rendering is CPU-bound and slow. A complex composition can take twenty minutes or more on a laptop.

The open-source core is MIT-licensed. The company behind it sells a cloud rendering service called Remotion Lambda, which runs renders on AWS in parallel.

Installing Remotion and creating a project

Remotion requires Node.js 16 or later. Install it with npm or yarn:

npm init video --name my-video

This scaffolds a project with a src/ folder containing a sample composition, a public/ folder for assets, and a remotion.config.ts file. The default template includes a rotating logo and some text—enough to see the structure.

Start the preview server:

npm start

A browser window opens at localhost:3000 showing the Remotion Studio. You see a timeline, a canvas, and a sidebar listing your compositions. Scrub the timeline and the canvas updates in real time, rendering the frame under the playhead.

Understanding the project structure

The entry point is src/Root.tsx, which registers compositions using the <Composition> component:

<Composition
  id="MyVideo"
  component={MyVideo}
  durationInFrames={300}
  fps={30}
  width={1920}
  height={1080}
/>

Each composition is a named video with fixed dimensions and frame rate. The durationInFrames prop sets the length: 300 frames at 30 fps equals 10 seconds. The component prop points to a React component that renders the video content.

Inside src/MyVideo.tsx, you import useCurrentFrame and interpolate from remotion:

import { useCurrentFrame, interpolate } from 'remotion';

export const MyVideo = () => {
  const frame = useCurrentFrame();
  const opacity = interpolate(frame, [0, 30], [0, 1], { extrapolateRight: 'clamp' });

  return (
    <div style={{ opacity, fontSize: 100 }}>
      Hello World
    </div>
  );
};

The interpolate function maps a frame range to a value range. Here, frames 0 to 30 map to opacity 0 to 1, so the text fades in over one second. The extrapolateRight: 'clamp' option keeps the opacity at 1 after frame 30 instead of continuing to increase.

Common animation patterns

Text appearing word by word: Split a string into an array, then use interpolate to control how many words are visible. If you have five words and 150 frames, each word appears every 30 frames:

const words = 'This is a sample sentence'.split(' ');
const wordCount = Math.floor(interpolate(frame, [0, 150], [0, words.length], { extrapolateRight: 'clamp' }));
const visibleText = words.slice(0, wordCount).join(' ');

Slide transitions: Use translateX or translateY to move elements on and off screen. A slide entering from the right:

const translateX = interpolate(frame, [0, 20], [1920, 0], { extrapolateRight: 'clamp' });
return <div style={{ transform: `translateX(${translateX}px)` }}>Content</div>;

Data-driven videos: Pass an array of objects as defaultProps in the composition, then map over it to render multiple scenes. In Root.tsx:

<Composition
  id="DataVideo"
  component={DataVideo}
  durationInFrames={600}
  fps={30}
  width={1920}
  height={1080}
  defaultProps={{ items: [{ title: 'Slide 1', duration: 90 }, { title: 'Slide 2', duration: 90 }] }}
/>

Inside the component, use useVideoConfig to access props, then calculate which item should be visible based on the current frame.

Adding audio and synchronising it

Place an MP3 or WAV file in the public/ folder, then import the <Audio> component:

import { Audio } from 'remotion';

<Audio src="/voiceover.mp3" />

The audio starts at frame 0 by default. To delay it, use the startFrom prop (measured in frames). To trim the audio, use endAt. Remotion does not include speech-to-text or automatic subtitle generation—you need to provide timestamps separately, either by hand or using a service like Deepgram or AssemblyAI, then pass them as props.

Rendering locally versus in the cloud

To render on your machine, run:

npm run build

This outputs an MP4 to the out/ folder. Render time depends on video length, resolution, CPU, and animation complexity. A 4K video with heavy effects can take significantly longer than a simple 1080p composition. Rendering is single-threaded per frame but parallelised across frames, so more CPU cores help.

If the process crashes with an out-of-memory error, reduce --concurrency (the number of frames rendered in parallel) from the default of half your CPU cores down to 1 or 2. Memory usage spikes during rendering because Chromium holds frames in RAM before encoding.

Remotion Lambda costs: The cloud rendering service deploys a Lambda function and S3 bucket in your AWS account. You pay AWS directly for compute and storage; Remotion charges a per-minute fee on top. Check the Remotion Lambda pricing page for current rates and the AWS Lambda pricing calculator for compute costs. The free tier covers small-scale testing, but you will hit AWS charges quickly if you render dozens of videos daily.

The Lambda setup requires an AWS account and the Remotion Lambda CLI. The official setup guide walks through IAM permissions and deployment.

Technical limitations that will cost you time

Remotion is not beginner-friendly if you have never written React. You need to understand hooks, props, and component composition. The documentation is thorough, but examples assume familiarity with JSX and ES6 syntax.

Rendering is CPU-bound and slow compared to GPU-accelerated editors like DaVinci Resolve. You cannot preview effects in real time at full resolution—the Studio scrubs at lower quality to stay responsive. This makes iterating on complex animations tedious: change a parameter, wait for the preview to update, repeat. If you are tweaking easing curves or timing, expect to lose hours to this cycle.

Remotion cannot import After Effects or Premiere projects. If your workflow involves motion graphics built in traditional tools, you need to recreate them in code or export them as video files and composite them in Remotion, which defeats the purpose. There is no GUI for keyframes or curves—everything is an interpolate call with numeric arrays.

Audio mixing is basic. You can layer multiple <Audio> components and adjust volume, but there is no built-in EQ, compression, or noise reduction. For anything beyond a voiceover and background music, pre-mix in Audacity or Adobe Audition.

Debugging is harder than in a timeline editor. If a frame renders incorrectly, you need to inspect the React component tree, check prop values, and trace through interpolation logic. The Studio shows a console, but error messages often point to Remotion internals rather than your code. If you are used to visual feedback, this is frustrating.

The concurrency flag controls how many frames render in parallel, but setting it too high crashes the process with cryptic Chromium errors. Too low and renders take forever. You will spend time profiling to find the sweet spot for your machine and composition.

When Remotion makes sense

Remotion shines when you need to generate many videos from a template. Examples: personalised marketing videos (“Hi [Name], here are your stats”), daily news summaries pulling from an API, or social media clips where text overlays change but the layout stays the same. If you are making one video, a timeline editor is faster.

It also fits well into CI/CD pipelines. You can trigger renders from a webhook, pass data as environment variables, and upload the result to S3 or YouTube automatically. This is harder to do with desktop editors.

Alternatives and when to use them

FFmpeg: If your video is purely programmatic (e.g., stitching images with crossfades), FFmpeg is faster and lighter. Remotion adds value when you need React’s component model or complex layouts.

Shotstack: A hosted API for video generation. You send JSON describing the edit, and Shotstack renders it in the cloud. Easier than Remotion if you do not want to manage AWS infrastructure, but less flexible. Check Shotstack’s pricing page for current subscription tiers and render limits.

Lottie + video editor: For motion graphics, export animations from After Effects as Lottie JSON, render them in a headless browser, then composite in FFmpeg. More steps, but avoids rewriting animations in code.

Who should skip Remotion

If you are not a developer or do not have one on your team, Remotion is the wrong tool. The setup, debugging, and iteration all require code literacy. No-code video tools like Descript, Kapwing, or Canva are better fits for non-technical creators, even if they lack automation features.

If you need real-time rendering or interactive video (e.g., a web app where users control playback), use a canvas library like Fabric.js or a game engine like Phaser. Remotion outputs static files; it does not run in the browser after rendering.

If your videos involve heavy 3D or particle effects, a GPU-accelerated tool like Blender or Unreal Engine will render faster and give you more control. Remotion runs in Chromium, which is not optimised for those workloads.

Frequently asked questions

What is Remotion and how does it work?

Remotion is a React framework that renders videos by capturing frames from a headless Chromium browser. You write components using JSX, and Remotion evaluates them for each frame number, screenshots the result, then encodes the sequence into a video file. Audio is mixed separately and muxed into the final output. It runs locally via Node.js or in the cloud on AWS Lambda.

Do I need to know React to use Remotion?

Yes. Remotion is built on React, and all video content is defined as React components. You need to understand JSX syntax, hooks like useCurrentFrame, and how props flow through components. If you have never written React, expect a steep learning curve. The documentation includes React tutorials, but prior experience with JavaScript frameworks helps significantly.

Can I use Remotion for free or does it require a license?

The core Remotion library is open-source under the MIT license and free for any use, including commercial projects. The Remotion Lambda cloud rendering service is a paid product charged per rendered second, plus underlying AWS costs. You can render locally forever without paying Remotion, but cloud rendering requires a subscription or pay-as-you-go billing through your AWS account.

How do I render a Remotion video programmatically?

Use the @remotion/renderer package in a Node.js script. Import bundle to compile your project, then call renderMedia with the composition ID, output path, and any props. This runs the render headlessly, outputting an MP4 or WebM. You can trigger it from a web server, cron job, or CI pipeline. The Remotion Lambda SDK provides similar functions for cloud rendering via API calls.

What are the system requirements for running Remotion?

Remotion requires Node.js 16 or later and a system capable of running headless Chromium. On macOS and Windows, this works out of the box. On Linux, you may need to install dependencies like libnss3 and libatk1.0-0. Rendering is CPU-intensive, so more cores reduce render time linearly. RAM usage scales with video resolution and concurrency; 8 GB is the practical minimum for 1080p, 16 GB recommended for 4K.

Photo by Lukas Blazek on Pexels