Remotion TypeScript Setup: Complete Getting Started Guide (2026)

If you want to build videos programmatically with React and TypeScript, Remotion is the most mature framework available today. This guide walks you through a complete Remotion TypeScript setup — from zero to your first rendered video file — using the official CLI and current best practices as of 2026.

Why TypeScript for Remotion?

Remotion is built on React, and React + TypeScript is now the industry standard pairing for a reason. When you add TypeScript to a Remotion project, you immediately gain several concrete advantages:

Typed component props. Every composition in Remotion accepts a props object. Without TypeScript, nothing stops you from passing title: 42 when your component expects a string. With a TypeScript interface, the compiler catches that mistake before you ever run the preview server.

Autocomplete for the Remotion API. Functions like useCurrentFrame, interpolate, and spring all ship with full type definitions. Your editor will autocomplete every parameter and flag their types inline, so you spend less time reading docs and more time building.

Fewer runtime surprises. Videos are expensive to render. Catching a null-reference error at compile time — rather than 40 seconds into a 120-second render — saves real time and CPU.

Refactoring confidence. Rename a prop, change a data shape, or restructure your composition tree: TypeScript will highlight every place that needs updating across your entire project.

In short, TypeScript turns a Remotion project from a collection of loosely connected components into a coherent, maintainable codebase — and that matters whether you are working solo or on a team.

Prerequisites

Before starting, make sure your environment meets these requirements:

Node.js 18 or higher (Node 20 LTS is recommended). Run node -v to check.
npm 7+, yarn, or pnpm — any of the three work with the Remotion CLI.
A code editor with TypeScript support (VS Code with the built-in TypeScript language service is the most common choice).
ffmpeg is required for rendering video files locally. On macOS you can install it with brew install ffmpeg; on Ubuntu, sudo apt install ffmpeg. The Remotion CLI will warn you if it cannot find ffmpeg.

You do not need any global Remotion installation. The CLI uses npx, so everything runs from a local project dependency.

Creating a New Project

Remotion provides an interactive project scaffolding command. Open a terminal, navigate to the directory where you want to create your project, and run:

npx create-video@latest

This launches an interactive prompt that asks you to:

Choose a project name (e.g. my-video)
Select a template — choose Blank TypeScript for the cleanest starting point, or pick one of the pre-built templates if you prefer scaffolded examples

If you want a non-interactive setup (useful in CI or when you already know what you want), you can pass flags directly:

npx create-video@latest --yes --blank my-video

Once the scaffold completes, install dependencies:

cd my-video
npm install

That is all it takes to create a fully configured Remotion TypeScript project.

Project Structure Walkthrough

After scaffolding, your project will look roughly like this:

my-video/
├── src/
│   ├── index.ts          # Entry point — registers compositions
│   ├── Root.tsx          # Root component, renders <Composition> tags
│   └── MyComposition.tsx # Your first composition component
├── remotion.config.ts    # Remotion configuration
├── tsconfig.json         # TypeScript compiler config
├── package.json
└── package-lock.json

A few things to understand about this structure:

src/index.ts — the entry point. This is the file Remotion loads first. It does one thing: calls registerRoot with your root component. Every video you want available in the Studio must be registered here (or in a component it renders).

src/Root.tsx — the composition registry. This is where you declare <Composition> elements. Each <Composition> tells Remotion the ID, dimensions, frame rate, duration, and component for one video.

remotion.config.ts — the configuration file. This file is optional but commonly used to customize your webpack config, set the browser executable, or configure concurrency for rendering. It is loaded by the Remotion CLI at runtime.

tsconfig.json — TypeScript config. Remotion requires specific TypeScript settings to compile JSX correctly. We will look at this in detail in the next section.

TypeScript Configuration for Remotion

Open tsconfig.json. A working minimal configuration for Remotion looks like this:

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "ESNext",
    "moduleResolution": "bundler",
    "jsx": "react-jsx",
    "strict": true,
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "isolatedModules": true,
    "lib": ["ES2022", "DOM"],
    "skipLibCheck": true
  },
  "include": ["src"]
}

The critical settings for Remotion are:

"jsx": "react-jsx" — use the modern JSX transform (no need to import React in every file).
"strict": true — enables all strict checks. This is what makes TypeScript genuinely useful for catching prop errors.
"moduleResolution": "bundler" — matches how Remotion’s webpack-based bundler resolves modules.
"isolatedModules": true — required for Remotion’s bundler to correctly handle per-file compilation.

The scaffolded tsconfig.json will already have these set correctly. If you are adding Remotion to an existing TypeScript project, compare your settings against this reference.

Your First Composition: Typed Props

Open src/MyComposition.tsx. Here is a minimal example that demonstrates typed props from end to end:

import { AbsoluteFill, useCurrentFrame, interpolate } from "remotion";

// 1. Define an interface for your composition's props
interface MyCompositionProps {
  title: string;
  backgroundColor: string;
}

// 2. Use the interface as the type parameter on your component
export const MyComposition: React.FC<MyCompositionProps> = ({
  title,
  backgroundColor,
}) => {
  const frame = useCurrentFrame();

  // interpolate maps frame numbers to output values
  const opacity = interpolate(frame, [0, 30], [0, 1], {
    extrapolateRight: "clamp",
  });

  return (
    <AbsoluteFill
      style={{
        backgroundColor,
        justifyContent: "center",
        alignItems: "center",
      }}
    >
      <h1 style={{ opacity, color: "white", fontSize: 64 }}>{title}</h1>
    </AbsoluteFill>
  );
};

Now register this composition in src/Root.tsx:

import { Composition } from "remotion";
import { MyComposition } from "./MyComposition";

export const RemotionRoot: React.FC = () => {
  return (
    <>
      <Composition
        id="MyComposition"
        component={MyComposition}
        durationInFrames={90}
        fps={30}
        width={1920}
        height={1080}
        defaultProps={{
          title: "Hello, Remotion!",
          backgroundColor: "#0f172a",
        }}
      />
    </>
  );
};

The defaultProps object must satisfy the MyCompositionProps interface — TypeScript will report an error if it does not. This is the safety net that makes typed compositions so valuable.

Running Remotion Studio

The Remotion Studio is a browser-based preview environment where you can scrub through your timeline, edit default props live, and inspect individual frames.

Start it with:

npm run dev

Under the hood this runs npx remotion studio. The Studio opens at http://localhost:3000 by default. You should see your composition listed in the left panel. Click it to open the preview.

From here you can:

Drag the playhead to scrub through frames
Edit defaultProps values using the Props editor on the right side panel
See real-time re-renders as you change your component code (hot reload is enabled automatically)

The Studio does not produce an output video file — it is purely for development and iteration.

Rendering Your First Video

When you are happy with the preview, render a video file with the Remotion CLI:

npx remotion render src/index.ts MyComposition out/video.mp4

Breaking that command down:

src/index.ts — the entry point file
MyComposition — the composition ID you set in <Composition id="MyComposition" />
out/video.mp4 — the output file path (the out/ directory is created automatically)

Remotion will spin up a headless browser, render each frame as a screenshot, and then use ffmpeg to stitch the frames into an MP4 at the frame rate you specified (30 fps in our example).

You can also add a render script to package.json for convenience:

"scripts": {
  "dev": "remotion studio",
  "render": "remotion render src/index.ts MyComposition out/video.mp4"
}

Then just run npm run render from now on.

Rendering to other formats

Remotion supports multiple output codecs. To render a GIF:

npx remotion render src/index.ts MyComposition out/animation.gif

To render a PNG image sequence:

npx remotion render src/index.ts MyComposition out/frames/ --sequence

Next Steps

Now that your Remotion TypeScript project is up and running, here are the natural directions to explore:

Add more compositions. Each <Composition> in Root.tsx is a separate video. You can have dozens in one project, each with its own props interface and component.

Use spring for natural motion. The spring() helper produces physics-based animation values that feel more organic than linear interpolation. It is one of Remotion’s most powerful primitives.

Sequence and layer your content. The <Sequence> component lets you offset when a child component starts playing within the parent’s timeline, making it easy to choreograph multi-part animations.

Pull in real data. Because your compositions are just React components, you can fetch data at render time or pass it through inputProps. This makes it straightforward to build data-driven videos — charts, leaderboards, personalized content — at scale.

Use pre-built TypeScript templates. Building every composition from scratch is time-consuming. RenderComp provides production-ready Remotion TypeScript templates for common video types: lower thirds, title cards, data visualizations, social media posts, and more.

FAQ

Q: Do I need to know React to use Remotion? A: Yes — Remotion compositions are React functional components. If you are comfortable with React hooks and JSX, you have the foundation you need. You do not need deep React expertise; most Remotion work involves straightforward rendering logic rather than complex state management.

Q: Can I use Remotion without TypeScript? A: Yes. You can write .jsx files instead of .tsx and remove the TypeScript config. However, the Remotion team and the broader community strongly recommend TypeScript because the type-safety benefits are especially valuable when working with animation parameters and frame-based logic.

Q: How long does rendering take? A: It depends on your composition’s complexity and your machine’s CPU. A simple 30-second 1080p video typically takes 2–5 minutes on a modern laptop. For production workloads, Remotion Lambda enables parallel rendering on AWS, bringing that same video down to a few seconds.

Q: My render fails with “ffmpeg not found” — what do I do? A: Install ffmpeg and make sure it is on your system PATH. On macOS: brew install ffmpeg. On Linux: sudo apt install ffmpeg (Debian/Ubuntu) or the equivalent for your distro. On Windows, download a build from ffmpeg.org and add the bin/ folder to your PATH environment variable.

Q: Can I import custom fonts? A: Yes, using the @remotion/google-fonts package (which bundles fonts locally — no CDN request at render time), or by loading a local font file with a CSS @font-face declaration inside your component’s <style> block. Remotion’s bundler will include locally referenced font files in the bundle automatically.

Q: Is hot reload supported in the Studio? A: Yes. Changes to your .tsx files are picked up automatically without a manual refresh, making the iteration loop fast.

Q: What version of Remotion should I install? A: Always use the latest stable version via npm create video@latest. All packages in the Remotion ecosystem (remotion, @remotion/cli, @remotion/player, etc.) must be the same version to avoid compatibility issues. The create-video scaffold handles this automatically.

Skip the Boilerplate with RenderComp TypeScript Templates

Getting a Remotion TypeScript project running is only the first step. The real work — designing polished compositions, handling edge cases, and building reusable animation logic — takes significantly longer.

RenderComp TypeScript templates give you production-ready Remotion compositions you can drop straight into your project. Every template ships with:

Full TypeScript prop interfaces with JSDoc comments
Customizable defaults ready for inputProps
Responsive layout that works at 1080p and 4K
Inline documentation explaining each animation parameter

Browse RenderComp TypeScript Templates →