Deploy Remotion Studio as static site

available from v4.0.97

You can deploy the Remotion Studio as a static site, for example to Vercel or Netlify.
Server-side rendering will not be available, but if you enable client-side rendering, you can render videos directly in the browser.
The deployed URL may also be used as a Serve URL to pass to rendering APIs.
Make sure you are on at least v4.0.97 to use this feature - use npx remotion upgrade to upgrade.

Export the Remotion Studio as a static site

To export the Remotion Studio as a static site, run the remotion bundle command:

npx remotion bundle

The output will be in the build folder.
We recommend to add build to your .gitignore file. The command will offer to do it for you when you run it.

Deploy to Vercel

To deploy to Vercel, connect your repository to Vercel.

In the "Build and Output" settings, enable "OVERRIDE" and set the following:

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

note

Using bunx as a script runner is slightly faster than using npx.

Deploy to Netlify

Connect your repository to Netlify.

• Base directory: Leave default
• Build command: npx remotion bundle
• Publish directory: build
• Functions directory: Leave default

Deploy to GitHub Pages

1

Create the following file in your repo:

name: Deploy Remotion studio
on:
  workflow_dispatch:
  push:
    branches:
      - 'main'
permissions:
  contents: write
jobs:
  render:
    name: Render video
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@main
      - name: install packages
        run: npm i
      - name: Bundle Studio
        run: npx remotion bundle --public-path="./"
      - name: Deploy Studio
        uses: JamesIves/github-pages-deploy-action@v4
        with:
          folder: build

The above code will deploy the bundled Remotion Studio to a branch gh-pages.

note

The --public-path flag for npx remotion bundle is available only from remotion version 4.0.127

3

Go to the settings of your repository (github.com/[username]/[repo]/settings/pages)

4

In the Branch section, select the gh-pages branch and click save.

Rendering from a URL

The deployed URL is a Serve URL can also be used to render a video:

CLI

Minimal example:

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

Specify "HelloWorld" composition ID and input props:

npx remotion render https://remotion-helloworld.vercel.app HelloWorld --props '{"titleText":"Hello World"}'

Node.js/Bun

const inputProps = {
  titleText: 'Hello World',
};

const serveUrl = 'https://remotion-helloworld.vercel.app';

const composition = await selectComposition({
  serveUrl,
  id: 'HelloWorld',
  inputProps,
});

await renderMedia({
  composition,
  serveUrl,
  codec: 'h264',
  inputProps,
});

Refer to renderMedia() to see all available options.

Lambda

npx remotion lambda render https://remotion-helloworld.vercel.app HelloWorld --props '{"titleText":"Hello World"}'

import {renderMediaOnLambda} from '@remotion/lambda/client';

const {bucketName, renderId} = await renderMediaOnLambda({
  region: 'us-east-1',
  functionName: 'remotion-render-bds9aab',
  composition: 'HelloWorld',
  serveUrl: 'https://remotion-helloworld.vercel.app',
  codec: 'h264',
  inputProps: {
    titleText: 'Hello World',
  },
});

You need to complete the Remotion Lambda Setup first.

Cloud Run

npx remotion cloudrun render https://remotion-helloworld.vercel.app HelloWorld --props '{"titleText":"Hello World"}'

import {renderMediaOnCloudrun} from '@remotion/cloudrun/client';

const result = await renderMediaOnCloudrun({
  region: 'us-east1',
  serviceName: 'remotion-render-bds9aab',
  composition: 'HelloWorld',
  serveUrl: 'https://remotion-helloworld.vercel.app',
  codec: 'h264',
  inputProps: {
    titleText: 'Hello World!',
  },
});

if (result.type === 'success') {
  console.log(result.bucketName);
  console.log(result.renderId);
}

You need to complete the Remotion Cloud Run Setup first.