This is a Next.js template for building programmatic video apps, with @remotion/player and @remotion/lambda built in.

This template uses the Next.js App directory. There is a Tailwind CSS version and a Pages directory version of this template available.

Getting Started

Use this template to clone it into your GitHub account. Run

npm i

afterwards. Alternatively, use this command to scaffold a project:

npx create-video@latest --next

Commands

Start the Next.js dev server:

npm run dev

Open the Remotion Studio:

npm run remotion

Render a video locally:

npx remotion render

Upgrade Remotion:

npx remotion upgrade

The following script will set up your Remotion Bundle and Lambda function on AWS:

node deploy.mjs

You should run this script after:

• changing the video template
• changing config.mjs
• upgrading Remotion to a newer version

Set up rendering on AWS Lambda

This template supports rendering the videos via Remotion Lambda.

1. Copy the .env.example file to .env and fill in the values. Complete the Lambda setup guide to get your AWS credentials.

2. Edit the config.mjs file to your desired Lambda settings.

3. Run node deploy.mjs to deploy your Lambda function and Remotion Bundle.

Docs

Get started with Remotion by reading the fundamentals page.

Help

We provide help on our Discord server.

Issues

Found an issue with Remotion? File an issue here.

License

Note that for some entities a company license is needed. Read the terms here.

2:37 PM To register a newly created animation so it appears correctly in your web application and the combobox, you need to update exactly two files.

Here is the step-by-step tutorial.

Step 1: Register the Composition for Remotion First, we have to tell the underlying Remotion system that your animation exists so it knows how to render it.

File to edit: src/remotion/Root.tsx

Import your animation at the top of the file alongside the others. tsx import { YourNewAnimation } from "./MyComp/YourNewAnimation"; Add a entry inside the main RemotionRoot component's return statement. Scroll down to where you see all the other tags (around line 140) and paste in yours: tsx <Composition id="YourNewAnimation" // The unique ID for this animation component={YourNewAnimation} durationInFrames={300} // The length of your animation fps={30} width={1920} height={1080} defaultProps={{}} /> Note: The id string here must perfectly match the one you use in the next step.

Step 2: Add it to the Combobox Array Next, we add it to the UI drop-down menu so you can select and view it.

File to edit: src/app/page.tsx

Import your animation at the top of the file. tsx import { YourNewAnimation } from "../remotion/MyComp/YourNewAnimation"; Find the compositions array. Look for const compositions: Composition[] = [ (around line 174). This is the master list that powers the main "Search animations..." combobox. Add your new animation to the array. Scroll to the very bottom of this compositions array (right before the ]; closing bracket) and insert your configuration object: tsx { id: "YourNewAnimation", // Must exactly match the ID from Step 1 name: "My Awesome Animation - Title for Combobox", // This is the text you will search/see in the dropdown! component: YourNewAnimation, duration: 300, // Should match durationInFrames from Step 1 fps: 30, width: 1920, height: 1080, inputProps: {}, // Required to be present! }, ]; Quick Recap Checklist src/remotion/Root.tsx: Imported the file? src/remotion/Root.tsx: Added component? src/app/page.tsx: Imported the file? src/app/page.tsx: Added to the compositions array? Do the id strings perfectly match in both places? Did you use inputProps: {} (and not category) in page.tsx? Once those are done, your new animation will immediately appear in the dropdown!