Skip to main content

Server-Side Rendering

import {TableOfContents} from '../components/TableOfContents/renderer';

Remotion's rendering engine is built with Node.JS, which makes it easy to render a video in the cloud.

Render a video on AWS Lambda​

The easiest and fastest way to render videos in the cloud is to use @remotion/lambda.

Render a video using Node.JS APIs​

The NPM package @remotion/renderer provides you with an API for rendering media programmatically. You can make a video in three steps:

1 Creating a Remotion Bundle
2 Select the composition to render and calculate its metadata
3 Rendering frames and stitching them together to an MP4.

Follow this commented example to see how to render a video:

render.mjs
tsx
import { bundle } from "@remotion/bundler";
import { renderMedia, selectComposition } from "@remotion/renderer";
import path from "path";
 
// The composition you want to render
const compositionId = "HelloWorld";
 
// You only have to create a bundle once, and you may reuse it
const bundleLocation = await bundle({
  entryPoint: path.resolve("./src/index"),
  // If you have a Webpack override, make sure to add it here
  webpackOverride: (config) => config,
});
 
// Parametrize the video by passing arbitrary props to your component.
const inputProps = {
  foo: "bar",
};
 
// Get the composition you want to render. Pass inputProps if you want to customize the
// duration or other metadata.
const composition = await selectComposition({
  serveUrl: bundleLocation,
  id: compositionId,
  inputProps,
});
 
// Render the video
await renderMedia({
  composition,
  serveUrl: bundleLocation,
  codec: "h264",
  outputLocation: `out/${compositionId}.mp4`,
  inputProps,
});
 
console.log("Render done!");
render.mjs
tsx
import { bundle } from "@remotion/bundler";
import { renderMedia, selectComposition } from "@remotion/renderer";
import path from "path";
 
// The composition you want to render
const compositionId = "HelloWorld";
 
// You only have to create a bundle once, and you may reuse it
const bundleLocation = await bundle({
  entryPoint: path.resolve("./src/index"),
  // If you have a Webpack override, make sure to add it here
  webpackOverride: (config) => config,
});
 
// Parametrize the video by passing arbitrary props to your component.
const inputProps = {
  foo: "bar",
};
 
// Get the composition you want to render. Pass inputProps if you want to customize the
// duration or other metadata.
const composition = await selectComposition({
  serveUrl: bundleLocation,
  id: compositionId,
  inputProps,
});
 
// Render the video
await renderMedia({
  composition,
  serveUrl: bundleLocation,
  codec: "h264",
  outputLocation: `out/${compositionId}.mp4`,
  inputProps,
});
 
console.log("Render done!");

This flow is highly customizable. Click on one of the SSR APIs to read about it's options:

note

If you are using Next.js, you will not be able to use @remotion/bundler because of the limitations explained in Can I render videos in Next.js? Refer to the page for possible alternatives.

Render using GitHub Actions​

The Hello World starter template includes a GitHub Actions workflow file .github/workflows/render-video.yml.

1 Commit the template to a GitHub repository.
2 On GitHub, click the Actions tab.
3 Select the Render video workflow on the left.
4 A Run workflow button should appear. Click it.
5 Fill in the props of the root component and click Run workflow.
6 After the rendering is finished, you can download the video under Artifacts.

Note that running the workflow may incur costs. However, the workflow will only run if you actively trigger it.

See also: Passing input props in GitHub Actions

Render a video using Docker​

See: Dockerizing a Remotion project

Render a video using GCP Cloud Run​

An official Remotion package for Cloud Run is in development. Register your interest in Discord if you want to be a beta tester.

API reference​