Skip to main content

Converting a Remotion project to an app

If you have started from any Remotion template except the Next.js and Remix 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.

Scaffold a new project using one of those templates:

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

Copy the contents of the public folder into the new project.

Find where the <Player> is rendered:

  • In the Next.js Pages Dir template: Under pages/index.tsx.

  • In the Next.js App Dir template: Under app/page.tsx.

  • In the Remix template: Under app/routes/_index.tsx.

Choose the main composition that you want to render in the Player and include it's component and other metadata in the <Player>. You may import the component from the remotion 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.

If you have any Webpack override defined in remotion.config.ts , look up how to apply it to your framework as well.

Next steps​

Good luck with your new app!

See also​