Skip to main content

Turn a <Player> into a Remotion project

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:

Use the Remotion Studio


Render videos locally


Create a Remotion Bundle that allows rendering in the cloud


Instructions​

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 npx remotion studio :


Install the Remotion CLI:

npm i --save-exact @remotion/cli@4.0.209
npm i --save-exact @remotion/cli@4.0.209
This assumes you are currently using v4.0.209 of Remotion.
Also update remotion and all `@remotion/*` packages to the same version.
Remove all ^ character in front of the version numbers of it as it can lead to a version conflict.

Make a new folder remotion and add these two files in it:



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

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

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

Apply common Webpack overrides that are commonly enabled in React apps:



Start the Remotion Studio:​

npx remotion studio
npx remotion studio

Render a video​

Render our a video using

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