Converting a Remotion project to an app - Remotion

If you have started from any Remotion template except the Next.js and React Router templates, you currently have an app where you can start the Remotion Studio.

If you would like to now turn your project into an app, follow these steps.

<Step>1</Step> Scaffold a new project using one of those templates:

<Step>2</Step> In the <code>remotion/Root.tsx</code> file of the new project, replace the sample code with the code from <code>src/Root.tsx</code> from your existing project. Include all other components recursively, until <code>npx tsc -w</code> does give no errors anymore.

<Step>3</Step> Copy the contents of the <code>public</code> folder into the new project.

<Step>4</Step> Find where the <code>{'<Player>'}</code> is rendered:

<ul> <li> In the Next.js Pages Dir template: Under{' '} <code>pages/index.tsx</code>. </li> <li> In the Next.js App Dir template: Under{' '} <code>app/page.tsx</code>. </li> <li> In the React Router template: Under{' '} <code>app/home.tsx</code>. </li> </ul>

Choose the main composition that you want to render in the Player and include it's <code>component</code> and other metadata in the <code><Player></code>. You may import the component from the <code>remotion</code> folder so it is imported in both the Studio and the app.

If you want to remove the duplication of metadata, you can define constants such as DURATION_IN_FRAMES and FPS in a separate file and import the constants in both the Studio and the app.

If you use calculateMetadata(), see here how you can use it with the Player.

<Step>5</Step> If you have any Webpack override defined in <code>remotion.config.ts</code> , look up how to apply it to your framework as well.

Next steps

Good luck with your new app!

Chat with other builders on Discord.
Post your app on #showcase and tag @remotion on x.com if you build something!
If you build together with others, ensure you have the proper Remotion license.