Remotion on Vercel

You have two options for rendering your videos on Vercel:

• Client-side rendering: Render videos using your computer's browser and compute resources
• Cloud-based rendering: Use a cloud server to render your video

Deployment

You can deploy any Remotion project on Vercel by connecting the repository and setting the following settings:

• Build Command: bunx remotion bundle
• Output Directory: build
• Installation Command: Leave default

Client-side rendering

Enable experimental client-side rendering in your remotion.config.ts file:

remotion.config.ts
ts
Config.setExperimentalClientSideRenderingEnabled(true);

This will make it possible to render videos client-side on your Vercel deployment.

Note that this will use your computer's browser and compute resources, making your computer slower while the render is running. If you are waiting on long renders, you may want to render in the cloud to free up your computer's resources.

Rendering using Vercel Sandbox

You can quickly deploy your Remotion project to Vercel to offload rendering to a Vercel Sandbox:

Vercel Sandbox allows you to render videos on-demand without managing Lambda or AWS infrastructure. Each render spawns an ephemeral Linux VM with full access to the Remotion renderer.

See the dedicated Vercel Sandbox page for full documentation.

Triggering Lambda renders from Vercel Serverless functions

You can trigger Remotion Lambda renders from Vercel Serverless functions.
See an example endpoint for rendering a video:

App router example

src/app/api/lambda/render/route.ts
ts
import {AwsRegion, RenderMediaOnLambdaOutput} from '@remotion/lambda/client';
import {renderMediaOnLambda, speculateFunctionName} from '@remotion/lambda/client';
import {NextResponse} from 'next/server';
 
const DISK = 10240;
const RAM = 2048;
const REGION = 'eu-central-1';
const SITE_NAME = 'https://remotion-helloworld.vercel.app';
const TIMEOUT = 120;
 
export const POST = async (req: Request, res: NextResponse) => {
  if (!process.env.AWS_ACCESS_KEY_ID && !process.env.REMOTION_AWS_ACCESS_KEY_ID) {
    throw new TypeError('Set up Remotion Lambda to render videos. See the README.md for how to do so.');
  }
  if (!process.env.AWS_SECRET_ACCESS_KEY && !process.env.REMOTION_AWS_SECRET_ACCESS_KEY) {
    throw new TypeError('The environment variable REMOTION_AWS_SECRET_ACCESS_KEY is missing. Add it to your .env file.');
  }
 
  const body = await req.json();
 
  const result = await renderMediaOnLambda({
    codec: 'h264',
    functionName: speculateFunctionName({
      diskSizeInMb: DISK,
      memorySizeInMb: RAM,
      timeoutInSeconds: TIMEOUT,
    }),
    region: REGION as AwsRegion,
    serveUrl: SITE_NAME,
    composition: body.id,
    inputProps: body.inputProps,
    downloadBehavior: {
      type: 'download',
      fileName: 'video.mp4',
    },
  });
 
  return result;
};

See also:

• App router - Example Render endpoint
• App router - Example Progress endpoint
• Pages router - Example Render endpoint
• Pages router - Example Progress endpoint

Rendering from a Vercel deployment

Deployments can be used as Serve URLs to render videos using any server-side rendering primitive.

Example:

bash
npx remotion render https://remotion-helloworld.vercel.app HelloWorld

Rendering on Vercel

Deploy the Vercel template:

Rendering will be done inside a Vercel Sandbox and the render will be stored in Vercel Blob.

Templates

• Next.js (App dir)
• Next.js (App dir, no TailwindCSS)
• Next.js (Pages dir)
• Next.js (App dir, Rendering in Vercel Sandbox)
• React Router 7 (Remix)

These templates are recommended for building applications that can generate videos.