Video as Code: a Remotion Template That Rebuilds Itself From Data

The template: three scenes and a data file

This is the structure Claude Code will build from the prompts below. Small on purpose: three scenes are enough to see how one data file drives the whole video, and easy to extend later.

video-template/
├── src/
│   ├── index.ts          # entry point
│   ├── Root.tsx          # registers "Report" + the data schema
│   ├── Video.tsx         # plays the 3 scenes in a <Series>
│   ├── limits.ts         # all the rules in one place
│   └── scenes/
│       ├── TitleScene.tsx
│       ├── ChartScene.tsx
│       └── EndScene.tsx
├── data/
│   ├── example.json      # default props
│   ├── stress.json       # the worst case
│   └── week-42.json      # a new version = a new file
└── public/
    └── music.mp3

{
  "title": "Online store: week 42",
  "subtitle": "Sales, Oct 13-19",
  "chart": [
    { "label": "Mon", "value": 120 },
    { "label": "Tue", "value": 95 },
    { "label": "Wed", "value": 140 },
    { "label": "Thu", "value": 160 }
  ],
  "highlight": "+18% vs last week",
  "cta": "Full report in the channel"
}

export const LIMITS = {
  titleMaxChars: 48,
  titleMaxLines: 2,
  titleFontMax: 120,   // px
  titleFontMin: 64,    // px, never smaller
  chartMaxBars: 7,
  scenes: { title: 3, chart: 5, end: 3 }, // seconds
  musicVolume: 0.35,
};

Prompts for Claude Code

Run them one by one in an empty folder, with Claude Code open in the terminal. After each step, open the preview and look before moving on.

npx skills add remotion-dev/skills

Claude Code may name files a bit differently or suggest a better structure. That is fine; what matters is that the text and numbers stay in the data file and the limits stay in one place.

Tune the template, or the headline runs off the screen

A template only saves time if new data never breaks it. Four things to set up once, before you trust it with a real video.

A new version from new data

Once the template is tuned, a new video is a new data file and one command.

1. 01

   Copy the data file

   Duplicate data/example.json, rename it (for example week-42.json) and change the values.

2. 02

   Check it in the preview

   Open the studio, paste the new values into the props panel on the right and play the video through. This is where you catch a headline that is too long.

   terminal

   npx remotion studio

3. 03

   Render

   Pass the data file to the render command. On Windows use a file, not inline JSON: the shell strips the quotes.

   terminal

   npx remotion render src/index.ts Report out/week-42.mp4 --props=data/week-42.json

4. 04

   Many at once

   A folder of data files becomes a folder of videos with a short loop. Or ask Claude Code: "add an npm script that renders every file in data/ into out/".

   bash

   for f in data/*.json; do
     npx remotion render src/index.ts Report "out/$(basename "$f" .json).mp4" --props="$f"
   done

When a video template is worth it

The template takes an evening to build and tune. It pays back where the format repeats and only the content changes.