Remotion on Vercel - Remotion

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

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.

Studio 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:

import {Config} from '@remotion/cli/config';
// ---cut---
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.

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:

<details> <summary>App router example</summary>

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;
};

</details>

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.

:::note The template does not include rate limiting or caching. Implement these before making your app publicly available, and set up Vercel Spend Management to control costs. Sandbox snapshots, rendered videos, and other Vercel Blob data persist indefinitely – delete them when no longer needed. :::

Templates

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