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.
While the Render button will be disabled, it may 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:

bash
npx remotion bundle

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

.github/workflows/deploy-studio.yml
yaml
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

.github/workflows/deploy-studio.yml
yaml
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:

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

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

Specify "HelloWorld" composition ID and input props:

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

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

Node.js/Bun

render.mjs
tsx
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,
});

render.mjs
tsx
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

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

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

Node.js/Bun
tsx
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",
  },
});

Node.js/Bun
tsx
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

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

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

Node.js/Bun
tsx
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);
}

Node.js/Bun
tsx
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.