Installing Remotion in an existing project

import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem';

Remotion can be installed into existing projects, such as Next.JS, Remix, Vite or Create React App, as well as server-only projects that run on Node.JS. Get started by adding the following packages:

<Tabs defaultValue="npm" values={[ { label: 'npm', value: 'npm', }, { label: 'yarn', value: 'yarn', }, { label: 'pnpm', value: 'pnpm', }, ] }>

bash
npm i @remotion/cli remotion

bash
npm i @remotion/cli remotion

bash
pnpm i @remotion/cli remotion

bash
pnpm i @remotion/cli remotion

bash
yarn add @remotion/cli remotion

bash
yarn add @remotion/cli remotion

• If you'd like to embed a Remotion video in your existing React app, install @remotion/player as well.
• If you'd like to render a video using the Node.JS APIs, install @remotion/renderer as well.
• If you'd like to trigger a render on Remotion Lambda, install @remotion/lambda as well.

Setting up the folder structure

Create a new folder for the Remotion files. It can be anywhere and assume any name, in this example we name it remotion and put it in the root of our project. Inside the folder you created, create 3 files:

remotion/Composition.tsx
tsx
export const MyComposition = () => {
  return null;
};

remotion/Composition.tsx
tsx
export const MyComposition = () => {
  return null;
};

remotion/Root.tsx
tsx
import React from "react";
import { Composition } from "remotion";
import { MyComposition } from "./Composition";
 
export const RemotionRoot: React.FC = () => {
  return (
    <>
      <Composition
        id="Empty"
        component={MyComposition}
        durationInFrames={60}
        fps={30}
        width={1280}
        height={720}
      />
    </>
  );
};

remotion/Root.tsx
tsx
import React from "react";
import { Composition } from "remotion";
import { MyComposition } from "./Composition";
 
export const RemotionRoot: React.FC = () => {
  return (
    <>
      <Composition
        id="Empty"
        component={MyComposition}
        durationInFrames={60}
        fps={30}
        width={1280}
        height={720}
      />
    </>
  );
};

remotion/index.ts
ts
import { registerRoot } from "remotion";
import { RemotionRoot } from "./Root";
 
registerRoot(RemotionRoot);

remotion/index.ts
ts
import { registerRoot } from "remotion";
import { RemotionRoot } from "./Root";
 
registerRoot(RemotionRoot);

The file that calls registerRoot() is now your Remotion entrypoint.

Starting the Studio

Start the Remotion Studio using the following command:

npx remotion studio remotion/index.ts

npx remotion studio remotion/index.ts

Replace remotion/index.ts with your entrypoint if necessary.

Render a video

Render our a video using

npx remotion render remotion/index.ts MyComp out.mp4

npx remotion render remotion/index.ts MyComp out.mp4

Replace the entrypoint, composition name and output filename with the values that correspond to your usecase.

Install the ESLint Plugin

Remotion has an ESLint plugin that warns about improper usage of Remotion APIs. To add it to your existing project, install it:

<Tabs defaultValue="npm" values={[ { label: 'npm', value: 'npm', }, { label: 'yarn', value: 'yarn', }, { label: 'pnpm', value: 'pnpm', }, ] }>

bash
npm i @remotion/eslint-plugin

bash
npm i @remotion/eslint-plugin

bash
yarn add @remotion/eslint-plugin

bash
yarn add @remotion/eslint-plugin

bash
pnpm i @remotion/eslint-plugin

bash
pnpm i @remotion/eslint-plugin

This snippet will enable the recommended rules only for the Remotion files:

.eslintrc
json
{
  "plugins": ["@remotion"],
  "overrides": [
    {
      "files": ["remotion/*.{ts,tsx}"],
      "extends": ["plugin:@remotion/recommended"]
    }
  ]
}

.eslintrc
json
{
  "plugins": ["@remotion"],
  "overrides": [
    {
      "files": ["remotion/*.{ts,tsx}"],
      "extends": ["plugin:@remotion/recommended"]
    }
  ]
}

Embed a Remotion video into your React app

You can use the <Player> component to display a Remotion video in your React project. Read the separate page about it for instructions.