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:

1
Use the Remotion Studio
2
Render videos locally
2
Create a Remotion Bundle that allows rendering in the cloud

Instructions

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

2
Install the Remotion CLI:
npm i --save-exact @remotion/cli@4.0.181
npm i --save-exact @remotion/cli@4.0.181
This assumes you are currently using v4.0.181 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.

3
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.

4
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.