Make a Training Video With Code Instead of a Camera

Most course video gets made the same way: write a script, record it, flub a line, re-record, cut the good takes together in a timeline editor, export, and hope nobody asks for a fix next month. That loop gets more expensive as you make more videos, because every video is a one-off performance you have to protect forever. The Make Video Courses with Code course teaches a different loop: write the video as data, generate the narration, render it with code, and treat every fix as a text edit instead of a re-shoot. This guide walks through the pipeline.

The trade you are actually making

Recording-based production repeats forever: script, record, re-record the flubbed line, edit a timeline, export, repeat the whole loop the next time something changes. The cost of a fix is the cost of a new shoot. Code-based production moves the performance out of a take and into data: you write a script, generate narration from it, and a program renders the video deterministically from that data every time. The cost of a fix becomes the cost of editing a line of text and re-running one command. You pay for this trade upfront, building the rendering pipeline once, in exchange for cheap fixes forever after.

Step 1: Prove it to yourself in five minutes

Before building anything real, scaffold a blank Remotion project with the exact command from Remotion's own documentation:

npx create-video@latest --yes --blank my-course-videos
cd my-course-videos
npm run dev

The first line scaffolds a blank project with no prompts, the second moves into it, and the third opens Remotion Studio in your browser with a live, editable preview. A Remotion composition is a normal React component rendered to a sequence of frames instead of a browser tab; what you see live in Studio is pixel-for-pixel what gets exported.

Step 2: Write the scene schema and manifest

This is the design decision, covered in full in write the scene schema and manifest, that determines whether the pipeline scales or turns into a pile of one-off files. A video is a short ordered list of scenes, and each scene has exactly one job, one visual template, and one block of narration. A reasonable starter set of templates: Title, Steps, Terminal, Diagram, and Closing. Five templates cover a surprising amount of instructional video; add a sixth only when you hit a shape none of the five can draw.

The manifest is the JSON file holding one video's actual content:

{
  "slug": "my-first-lesson",
  "title": "My First Lesson",
  "scenes": [
    {
      "id": "scene-1",
      "template": "Title",
      "narration": "Welcome. In the next few minutes you will see exactly how this works.",
      "props": { "title": "My First Lesson", "subtitle": "A short walkthrough" }
    }
  ]
}

Cap narration per scene at roughly 25 to 55 words, with a sweet spot around 35 to 45. Never hand-write a duration field; a scene's on-screen length should follow however long its narration audio actually runs, computed at render time rather than authored as a guess.

Step 3: Generate narration, and lock in one hard rule

The full narration, covers, and accuracy session covers this in depth. Loop over the manifest's scenes and call a text-to-speech API with each scene's exact narration text, saved as one audio file per scene. Check duration with ffprobe before trusting a generated file, and normalize loudness once, consistently, across every file:

ffmpeg -i vo/scene-1.mp3 -af loudnorm=I=-16:TP=-1.5:LRA=11 vo/scene-1-normalized.mp3

The rule that matters most once this runs unattended: every URL, domain, filename, price, and command shown in any scene's props must also appear, verbatim, in that video's own written script. If a fact is not in the script, it does not belong on screen. Nothing stops a template from displaying a plausible-looking command that was never verified, unless a validator checks for it before every render, not after.

Step 4: Render, compress, and host

The render, encode, and host session is the command-heavy one; here is the shape of it. Render a real file with Remotion's render command, picking a widely compatible codec:

npx remotion render src/index.ts MyComposition out/my-first-lesson.mp4 --codec=h264 --props='{"slug":"my-first-lesson"}'

Confirm what actually got rendered with ffprobe rather than trusting a render that finished without errors, then make a smaller web cut with ffmpeg before anything goes online, since a direct render is usually larger than a visitor on their phone needs:

ffmpeg -i out/my-first-lesson.mp4 -c:v libx264 -preset medium -crf 28 -pix_fmt yuv420p -movflags +faststart -c:a aac -b:a 96k out/my-first-lesson-web.mp4

Upload the result to object storage that hands back a public https URL, such as Vercel Blob, Cloudflare R2, or S3-compatible storage, and check the plan's size and bandwidth caps against your expected total before committing a whole library to one bucket.

The payoff that only shows up at volume

The economics do not show up on video one. They show up on video ten, and especially the day something changes across all of them. A typo in the narration means editing one JSON string and re-rendering, a few minutes, unattended, instead of re-shooting. A rebrand means changing color values in one style file and batch-rendering everything affected, instead of re-editing every video that shows the old logo. A second version for a different audience means rendering the same manifest again with a different visual skin, instead of a second full shoot.

What this is not for

Diagram-and-narration explainer video is the target: software walkthroughs, internal training, structured course content. If your video needs a real person's face and voice on camera as the point, keep your camera, and reach for this pipeline for everything else you are currently recording a screen for.

The full five-session course covers the schema in depth, the narration accuracy validator, the batch-render script, and cross-brand variants: start with why code beats recording in the library.

The free first session in the library walks through the whole setup on screen. Or see what All-Access unlocks on the pricing page.