diffreel ☕ Sponsor

Free & open source · MIT

Turn code changes into smooth videos

Give diffreel two versions of a file, a git commit or a list of steps. It renders an MP4, GIF or WebM in which unchanged code slides into place, removed code fades out and new code types in, all with syntax highlighting.

npx diffreel before.ts after.ts -o out.mp4
Try the live playground ★ Star on GitHub npm package

Live playground

Edit the code, and the preview runs the real diffreel engine in your browser. When it looks right, download steps.json and render the video with one command.

0.0s

Loading the engine…

npx diffreel steps.json -o diffreel.mp4

Rendering to a video file runs on your machine with headless Chromium and ffmpeg, so nothing is uploaded anywhere.

Why diffreel

Token-level magic move

diffreel diffs line by line, then token by token, so i <= n becomes i < n by moving the tokens that stayed instead of retyping the line.

200+ languages, 60+ themes

Highlighting comes from Shiki, the engine behind VS Code themes. Use github-dark, dracula, tokyo-night, nord or any other theme.

Made for social video

Choose 16:9 YouTube, 9:16 Reels and Shorts, or 1:1 square. Add captions, a macOS window frame, a typing effect and change highlights.

Runs locally

No server, no account and no upload. diffreel uses headless Chromium plus a bundled ffmpeg, so you install nothing else.

Sharp at any size

Frames render at 2× scale and are downsampled with Lanczos, so text stays crisp even after social apps compress the video.

Handles long files

The viewport scrolls to keep the changed lines centered, so you can animate a single fix inside a 1,000-line file.

Install and use

Requires Node.js 20 or newer. The first command downloads the headless browser used to draw frames, and you only run it once.

Install

npm install -g diffreel
npx playwright install chromium

Or skip the global install and use npx diffreel … each time.

1 · Two files

npx diffreel before.ts after.ts -o out.mp4

2 · A git commit

npx diffreel --git HEAD~1..HEAD --file src/app.ts -o out.mp4

3 · A whole tutorial

npx diffreel steps.json -o tutorial.mp4 --size reel --typing

From Node.js

import { render } from "diffreel";

await render({
  steps: [
    { code: "let total = 0;", lang: "ts", caption: "Before" },
    { code: "let total: number = 0;", lang: "ts", caption: "After" },
  ],
  output: "out.mp4",
  size: "reel",
  window: true,
});

See every option in the README →

Rendered examples

Each of these videos comes from a single command in the examples folder.

Bug fix · 16:9
Refactor to async/await · 16:9
React component, step by step · Reel 9:16
Python with typing · 1:1
SQL query, clause by clause · 1:1