Skip to main content

Render all compositions

In some scenarios, you might find it useful to render all compositions.

Via CLI​

You can combine the npx remotion compositions command with a bash loop:

render-all.sh
sh
compositions=($(npx remotion compositions src/index.ts -q))
for composition in "${compositions[@]}"
do
  npx remotion render src/index.ts $composition $composition.mp4
done
render-all.sh
sh
compositions=($(npx remotion compositions src/index.ts -q))
for composition in "${compositions[@]}"
do
  npx remotion render src/index.ts $composition $composition.mp4
done

You can execute it using:

sh
sh ./render-all.sh
sh
sh ./render-all.sh
note

This only works on UNIX-based systems (Linux, macOS) and on WSL in Windows.

Via Node.JS script​

You can create a script that fits you using the Node.JS APIs. Below is an example

render-all.mjs
ts
import { bundle } from "@remotion/bundler";
import { getCompositions, renderMedia } from "@remotion/renderer";
import { createRequire } from "module";
 
const require = createRequire(import.meta.url);
 
const bundled = await bundle({
  entryPoint: require.resolve("./src/index.ts"),
  // If you have a Webpack override, make sure to add it here
  webpackOverride: (config) => config,
});
 
const compositions = await getCompositions(bundled);
 
for (const composition of compositions) {
  console.log(`Rendering ${composition.id}...`);
  await renderMedia({
    codec: "h264",
    composition,
    serveUrl: bundled,
    outputLocation: `out/${composition.id}.mp4`,
  });
}
render-all.mjs
ts
import { bundle } from "@remotion/bundler";
import { getCompositions, renderMedia } from "@remotion/renderer";
import { createRequire } from "module";
 
const require = createRequire(import.meta.url);
 
const bundled = await bundle({
  entryPoint: require.resolve("./src/index.ts"),
  // If you have a Webpack override, make sure to add it here
  webpackOverride: (config) => config,
});
 
const compositions = await getCompositions(bundled);
 
for (const composition of compositions) {
  console.log(`Rendering ${composition.id}...`);
  await renderMedia({
    codec: "h264",
    composition,
    serveUrl: bundled,
    outputLocation: `out/${composition.id}.mp4`,
  });
}
Execute
bash
node render-all.mjs
Execute
bash
node render-all.mjs

See also​