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, React Router, Vite or Create React App, as well as server-only projects that run on Node.JS. Get started by adding the following packages:

• 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:

export const MyComposition = () => {
  return null;
};

// @filename: Composition.tsx
export const MyComposition: React.FC = () => {
  return null;
};
// @filename: Root.tsx
// ---cut---
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}
      />
    </>
  );
};

// @filename: Composition.tsx
export const MyComposition: React.FC = () => {
  return null;
};
// @filename: Root.tsx
import React from "react";
import { Composition } from "remotion";
import { MyComposition } from "./Composition";

export const RemotionRoot: React.FC = () => {
  return (
    <>
      <Composition
        id="MyComp"
        component={MyComposition}
        durationInFrames={60}
        fps={30}
        width={1280}
        height={720}
      />
    </>
  );
};
// @filename: index.ts
// ---cut---
import { registerRoot } from "remotion";
import { RemotionRoot } from "./Root";

registerRoot(RemotionRoot);

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

:::note Watch out for import aliases in your tsconfig.json that will resolve import {...} from "remotion" to the remotion folder. We recommend to not use paths without a prefix. :::

Starting the Studio

Start the Remotion Studio using the following command:

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

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', }, ] }> <TabItem value="npm">

npm i -D @remotion/eslint-plugin

yarn add -D @remotion/eslint-plugin

pnpm i -D @remotion/eslint-plugin

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

{
  "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.