Timeline – Rendering videos

The <Timeline /> component is in a sample Vite project, which is a frontend-only application.

If you want to render the state of your timeline into a video, you need to set up server-side rendering.

Recommendation: Use a backend framework

We recommend that you use one of our Saas templates to setup a Remotion project that has both a frontend and backend.

It is easier if you use Next.js or React Router templates and copy the timeline component into your project frontend.

These templates include useful boilerplate code for rendering on AWS Lambda.

Create Remotion project files

Follow these instructions for how to turn your <Player>-based frontend into a Remotion project.
If you are using a SaaS template, you might already have these files, in which case you can replace them.

Using the Timeline state

In src/timeline/video-preview.tsx, you can see that the timeline state is being passed to the <Player> component.

Whenever you are rendering a video using the server-side rendering APIs like renderMediaOnLambda or renderMedia(), make sure you specify the inputProps option and pass in the same payload that you passed to the <Player> component.

Note that this payload must be JSON-serializable, so you cannot pass in functions or other non-serializable values.