Skip to main content

Render videos programmatically from a dataset

You can use Remotion to do a batch render to create many videos based on a dataset. In the following example, we are going to turn a JSON dataset into a series of videos.

We'll start by creating a blank Remotion project:

bash
npm init video --blank
bash
npm init video --blank

Sample dataset​

JSON is the most convienient format to import in Remotion. If your dataset is in a different format, you can convert it using one of many available libraries on NPM.

my-data.ts
ts
export const data = [
  {
    name: "React",
    repo: "facebook/react",
    logo: "https://upload.wikimedia.org/wikipedia/commons/a/a7/React-icon.svg",
  },
  {
    name: "Remotion",
    repo: "remotion-dev/remotion",
    logo: "https://github.com/remotion-dev/logo/raw/main/withouttitle/element-0.png",
  },
];
my-data.ts
ts
export const data = [
  {
    name: "React",
    repo: "facebook/react",
    logo: "https://upload.wikimedia.org/wikipedia/commons/a/a7/React-icon.svg",
  },
  {
    name: "Remotion",
    repo: "remotion-dev/remotion",
    logo: "https://github.com/remotion-dev/logo/raw/main/withouttitle/element-0.png",
  },
];

Sample component​

This component will animate a title, subtitle and image using Remotion. Replace the contents of the src/Composition.tsx file with the following:

Composition.tsx
tsx
import React from "react";
import {
  AbsoluteFill,
  Img,
  interpolate,
  spring,
  useCurrentFrame,
  useVideoConfig,
} from "remotion";
interface Props {
  name: string;
  logo: string;
  repo: string;
}
export const MyComposition: React.FC<Props> = ({ name, repo, logo }) => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();
  const scale = spring({
    fps,
    frame: frame - 10,
    config: {
      damping: 100,
    },
  });
  const opacity = interpolate(frame, [30, 40], [0, 1], {
    extrapolateLeft: "clamp",
    extrapolateRight: "clamp",
  });
  const moveY = interpolate(frame, [20, 30], [10, 0], {
    extrapolateLeft: "clamp",
    extrapolateRight: "clamp",
  });
  return (
    <AbsoluteFill
      style={{
        scale: String(scale),
        backgroundColor: "white",
        fontWeight: "bold",
        justifyContent: "center",
        alignItems: "center",
      }}
    >
      <div
        style={{
          display: "flex",
          flexDirection: "row",
          alignItems: "center",
          gap: 20,
        }}
      >
        <Img
          src={logo}
          style={{
            height: 80,
          }}
        />
        <div
          style={{
            display: "flex",
            flexDirection: "column",
          }}
        >
          <div
            style={{
              fontSize: 40,
              transform: `translateY(${moveY}px)`,
              lineHeight: 1,
            }}
          >
            {name}
          </div>
          <div
            style={{
              fontSize: 20,
              opacity,
              lineHeight: 1.25,
            }}
          >
            {repo}
          </div>
        </div>
      </div>
    </AbsoluteFill>
  );
};
Composition.tsx
tsx
import React from "react";
import {
  AbsoluteFill,
  Img,
  interpolate,
  spring,
  useCurrentFrame,
  useVideoConfig,
} from "remotion";
interface Props {
  name: string;
  logo: string;
  repo: string;
}
export const MyComposition: React.FC<Props> = ({ name, repo, logo }) => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();
  const scale = spring({
    fps,
    frame: frame - 10,
    config: {
      damping: 100,
    },
  });
  const opacity = interpolate(frame, [30, 40], [0, 1], {
    extrapolateLeft: "clamp",
    extrapolateRight: "clamp",
  });
  const moveY = interpolate(frame, [20, 30], [10, 0], {
    extrapolateLeft: "clamp",
    extrapolateRight: "clamp",
  });
  return (
    <AbsoluteFill
      style={{
        scale: String(scale),
        backgroundColor: "white",
        fontWeight: "bold",
        justifyContent: "center",
        alignItems: "center",
      }}
    >
      <div
        style={{
          display: "flex",
          flexDirection: "row",
          alignItems: "center",
          gap: 20,
        }}
      >
        <Img
          src={logo}
          style={{
            height: 80,
          }}
        />
        <div
          style={{
            display: "flex",
            flexDirection: "column",
          }}
        >
          <div
            style={{
              fontSize: 40,
              transform: `translateY(${moveY}px)`,
              lineHeight: 1,
            }}
          >
            {name}
          </div>
          <div
            style={{
              fontSize: 20,
              opacity,
              lineHeight: 1.25,
            }}
          >
            {repo}
          </div>
        </div>
      </div>
    </AbsoluteFill>
  );
};
Remotion
remotion-dev/remotion
0:00 / 0:02

Writing the script​

In order to render our videos, we'll first need to bundle our project using Webpack and prepare it for rendering. This can be done by using the bundle() function from the @remotion/bundler package.

ts
import { bundle } from "@remotion/bundler";
 
const bundleLocation = await bundle({
  entryPoint: "./src/index.ts",
});
ts
import { bundle } from "@remotion/bundler";
 
const bundleLocation = await bundle({
  entryPoint: "./src/index.ts",
});

Getting the composition​

We can use getCompositions() to extract all the defined compositions. Select the composition by searching for the composition ID that is defined in src/Root.tsx - by default MyComp:

tsx
import { getCompositions } from "@remotion/renderer";
 
const compositionId = "MyComp";
const allCompositions = await getCompositions(bundleLocation);
 
const composition = allCompositions.find((c) => c.id === compositionId);
 
if (!composition) {
  throw new Error(`No composition with the ID ${compositionId} found.`);
}
tsx
import { getCompositions } from "@remotion/renderer";
 
const compositionId = "MyComp";
const allCompositions = await getCompositions(bundleLocation);
 
const composition = allCompositions.find((c) => c.id === compositionId);
 
if (!composition) {
  throw new Error(`No composition with the ID ${compositionId} found.`);
}

By throwing an error if the composition does not exist, we tell TypeScript that we are sure that composition is not undefined.

Rendering videos​

Import the dataset and loop over each entry. Trigger a render using renderMedia() and pass the data entry as inputProps. This will pass the object as React props to the component above.

ts
import { renderMedia } from "@remotion/renderer";
import { data } from "./dataset";
 
for (const entry of data) {
  await renderMedia({
    composition,
    serveUrl: bundleLocation,
    codec: "h264",
    outputLocation: `out/${entry.name}.mp4`,
    inputProps: entry,
  });
}
ts
import { renderMedia } from "@remotion/renderer";
import { data } from "./dataset";
 
for (const entry of data) {
  await renderMedia({
    composition,
    serveUrl: bundleLocation,
    codec: "h264",
    outputLocation: `out/${entry.name}.mp4`,
    inputProps: entry,
  });
}
note

It is not recommended to render more than one video at once.

Full script​

Currently, top level await is not well supported, so all asynchronous functions were wrapped in an async function and which is immediately called.

render.ts
ts
import { getCompositions, renderMedia } from "@remotion/renderer";
import { bundle } from "@remotion/bundler";
import { data } from "./dataset";
 
const compositionId = "MyComp";
 
const start = async () => {
  const bundleLocation = await bundle({
    entryPoint: "./src/index.ts",
  });
 
  const allCompositions = await getCompositions(bundleLocation);
 
  const composition = allCompositions.find((c) => c.id === compositionId);
 
  if (!composition) {
    throw new Error(`No composition with the ID ${compositionId} found.`);
  }
 
  for (const entry of data) {
    await renderMedia({
      composition,
      serveUrl: bundleLocation,
      codec: "h264",
      outputLocation: `out/${entry.name}.mp4`,
      inputProps: entry,
    });
  }
};
 
start()
  .then(() => {
    console.log("Rendered all videos");
  })
  .catch((err) => {
    console.log("Error occurred:", err);
  });
render.ts
ts
import { getCompositions, renderMedia } from "@remotion/renderer";
import { bundle } from "@remotion/bundler";
import { data } from "./dataset";
 
const compositionId = "MyComp";
 
const start = async () => {
  const bundleLocation = await bundle({
    entryPoint: "./src/index.ts",
  });
 
  const allCompositions = await getCompositions(bundleLocation);
 
  const composition = allCompositions.find((c) => c.id === compositionId);
 
  if (!composition) {
    throw new Error(`No composition with the ID ${compositionId} found.`);
  }
 
  for (const entry of data) {
    await renderMedia({
      composition,
      serveUrl: bundleLocation,
      codec: "h264",
      outputLocation: `out/${entry.name}.mp4`,
      inputProps: entry,
    });
  }
};
 
start()
  .then(() => {
    console.log("Rendered all videos");
  })
  .catch((err) => {
    console.log("Error occurred:", err);
  });

Running the script​

To help us in running the render, we need to install ts-node from npm.

bash
npm i ts-node
bash
npm i ts-node

You can then run the script using

bash
npx ts-node render.ts
bash
npx ts-node render.ts

Rendering videos from a CSV dataset​

Use a package like csv2json to convert your dataset into a JSON.

Change duration, width or height dynamically​

Call getCompositions() with the inputProps option and change the metadata programmatically as described here.

Credits​

Authored by Alex Fernandez and ThePerfectSystem, edited by Jonny Burger.

See also​