Turn a into a Remotion project - Remotion

If you have a React app that uses the <Player> component, you can turn it also into a Remotion project without having to create a new repository. This will enable you to:

<Step>1</Step> Use the <a href="/docs/studio/">Remotion Studio</a>

<Step>2</Step> Render videos locally

<Step>2</Step> Create a <a href="/docs/terminology/bundle"> Remotion Bundle </a> that allows rendering in the cloud

Instructions

<Step>1</Step> Ensure that you don't already have a Studio installed - in the following templates, the Studio is already installed and can be started using the command <a href="/docs/cli/studio"><code>npx remotion studio</code></a> :

<Step>2</Step> Install the Remotion CLI:

<Step>3</Step> Make a new folder <code>remotion</code> and add these two files in it:

tsx

// @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"
        // Import the component and add the properties you had in the `<Player>` before
        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);

Add the component you previously registered in the <Player> also to the <Composition>.
If necessary, move the components into the <code>remotion</code> directory.

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

<Step>4</Step> Apply common Webpack overrides that are commonly enabled in React apps:

Start the Remotion Studio:

npx remotion studio

Render a video

Render our a video using

npx remotion render remotion/index.ts

Set up server-side rendering

See server-side rendering for more information.

How do I download a video from the Remotion Player?

The video first needs to get rendered - this can only be done on the server. See ways to render and server-side rendering for more information.