Skip to main content

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

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