Skip to main content

Installing Remotion in an existing project

Remotion can be installed into any Node.JS based project, such as Create React App, Next.JS apps as well as server-only projects such as an Express API. Get started by adding the following packages:

bash
npm i @remotion/cli remotion
bash
npm i @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/Video.tsx
tsx
import React from "react";
import { Composition } from "remotion";
import { MyComposition } from "./Composition";
 
export const RemotionVideo: React.FC = () => {
  return (
    <>
      <Composition
        id="Empty"
        component={MyComposition}
        durationInFrames={60}
        fps={30}
        width={1280}
        height={720}
      />
    </>
  );
};
remotion/Video.tsx
tsx
import React from "react";
import { Composition } from "remotion";
import { MyComposition } from "./Composition";
 
export const RemotionVideo: 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 { RemotionVideo } from "./Video";
 
registerRoot(RemotionVideo);
remotion/index.ts
ts
import { registerRoot } from "remotion";
import { RemotionVideo } from "./Video";
 
registerRoot(RemotionVideo);

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

Starting the preview​

Start the preview server using the following command:

npx remotion preview remotion/index.ts
npx remotion preview 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:

bash
npm i @remotion/eslint-plugin
bash
npm i @remotion/eslint-plugin

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

.eslintrc
json
{
  "overrides": [
    {
      "files": ["remotion/*.{ts,tsx}"],
      "extends": ["plugin:@remotion/recommended"]
    }
  ]
}
.eslintrc
json
{
  "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.