Rendering using SSR APIs

The NPM package @remotion/renderer provides you with an API for rendering media programmatically.
These functions can be used in Node.js and Bun.

Rendering a video takes three steps:

1

Creating a Remotion Bundle

2

Select the composition to render and calculate its metadata

3

Render the video, audio, still or image sequence.

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
// for multiple renders that you can parametrize using input props.
const bundleLocation = await bundle({
  entryPoint: path.resolve("./src/index.ts"),
  // If you have a Webpack override, make sure to add it here
  webpackOverride: (config) => config,
});
 
// Parametrize the video by passing 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. Pass the same `inputProps` again
// if your video is parametrized with data.
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
// for multiple renders that you can parametrize using input props.
const bundleLocation = await bundle({
  entryPoint: path.resolve("./src/index.ts"),
  // If you have a Webpack override, make sure to add it here
  webpackOverride: (config) => config,
});
 
// Parametrize the video by passing 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. Pass the same `inputProps` again
// if your video is parametrized with data.
await renderMedia({
  composition,
  serveUrl: bundleLocation,
  codec: "h264",
  outputLocation: `out/${compositionId}.mp4`,
  inputProps,
});
 
console.log("Render done!");

This flow is customizable. Click on one of the SSR APIs to read about its options:

• getCompositions() - Get a list of available compositions from a Remotion project.
• selectComposition() - Get a list of available compositions from a Remotion project.
• renderMedia() - Render a video or audio.
• renderFrames() - Render an image sequence.
• renderStill() - Render a still image.
• stitchFramesToVideo() - Encode a video based on an image sequence
• openBrowser() - Share a browser instance across function calls for improved performance.

SSR APIs in Next.js

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.
We recommend Lambda for use in Next.js.

See also

• Server-side rendering