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.tsx -q))
for composition in "${compositions[@]}"
do
npx remotion render src/index.tsx $composition $composition.mp4
done
render-all.sh
sh
compositions=($(npx remotion compositions src/index.tsx -q))
for composition in "${compositions[@]}"
do
npx remotion render src/index.tsx $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.ts
ts
import { bundle } from "@remotion/bundler";
import { getCompositions, renderMedia } from "@remotion/renderer";
 
const start = async () => {
const bundled = await bundle(
require.resolve("./src/index.tsx"),
() => undefined,
{
// 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`,
});
}
};
 
start()
.then(() => {
process.exit(0);
})
.catch((err) => {
console.log(err);
process.exit(1);
});
render-all.ts
ts
import { bundle } from "@remotion/bundler";
import { getCompositions, renderMedia } from "@remotion/renderer";
 
const start = async () => {
const bundled = await bundle(
require.resolve("./src/index.tsx"),
() => undefined,
{
// 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`,
});
}
};
 
start()
.then(() => {
process.exit(0);
})
.catch((err) => {
console.log(err);
process.exit(1);
});

See also