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 convenient 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. Make sure to include the webpack override in the bundle if you have one.

ts
import { bundle } from "@remotion/bundler";
import { webpackOverride } from "./webpack-override";
 
const bundleLocation = await bundle({
  entryPoint: "./src/index.ts",
  // If you have a webpack override, don't forget to add it
  webpackOverride: webpackOverride,
});
ts
import { bundle } from "@remotion/bundler";
import { webpackOverride } from "./webpack-override";
 
const bundleLocation = await bundle({
  entryPoint: "./src/index.ts",
  // If you have a webpack override, don't forget to add it
  webpackOverride: webpackOverride,
});

Rendering videos​

Import the dataset and loop over each entry.

Fetch the composition metadata for each render using selectComposition(). You have the opportunity to parametrize the duration, width and height of the composition based on the data entry with the calculateMetadata() function.

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, selectComposition } from "@remotion/renderer";
import { data } from "./dataset";
 
for (const entry of data) {
  const composition = await selectComposition({
    serveUrl: bundleLocation,
    id: compositionId,
    inputProps: entry,
  });
 
  await renderMedia({
    composition,
    serveUrl: bundleLocation,
    codec: "h264",
    outputLocation: `out/${entry.name}.mp4`,
    inputProps: entry,
  });
}
ts
import { renderMedia, selectComposition } from "@remotion/renderer";
import { data } from "./dataset";
 
for (const entry of data) {
  const composition = await selectComposition({
    serveUrl: bundleLocation,
    id: compositionId,
    inputProps: entry,
  });
 
  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​

render.mjs
ts
import { selectComposition, renderMedia } from "@remotion/renderer";
import { webpackOverride } from "./webpack-override";
import { bundle } from "@remotion/bundler";
import { data } from "./dataset";
 
const compositionId = "MyComp";
 
const bundleLocation = await bundle({
  entryPoint: "./src/index.ts",
  // If you have a webpack override, don't forget to add it
  webpackOverride: webpackOverride,
});
 
for (const entry of data) {
  const composition = await selectComposition({
    serveUrl: bundleLocation,
    id: compositionId,
    inputProps: entry,
  });
 
  await renderMedia({
    composition,
    serveUrl: bundleLocation,
    codec: "h264",
    outputLocation: `out/${entry.name}.mp4`,
    inputProps: entry,
  });
}
render.mjs
ts
import { selectComposition, renderMedia } from "@remotion/renderer";
import { webpackOverride } from "./webpack-override";
import { bundle } from "@remotion/bundler";
import { data } from "./dataset";
 
const compositionId = "MyComp";
 
const bundleLocation = await bundle({
  entryPoint: "./src/index.ts",
  // If you have a webpack override, don't forget to add it
  webpackOverride: webpackOverride,
});
 
for (const entry of data) {
  const composition = await selectComposition({
    serveUrl: bundleLocation,
    id: compositionId,
    inputProps: entry,
  });
 
  await renderMedia({
    composition,
    serveUrl: bundleLocation,
    codec: "h264",
    outputLocation: `out/${entry.name}.mp4`,
    inputProps: entry,
  });
}

Running the script​

bash
node render.mjs
bash
node render.mjs

To use TypeScript, rename the file to render.ts, install ts-node from npm and run ts-node render.ts. If you get errors, wrap the asynchronous code in an async function and call it.

Rendering videos from a CSV dataset​

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

See also​