Tutorial videos
from your running app Phase 1 prototype
Recorded from the real UI macOS / Apple silicon

Shot on
your real app.

Walkthrough opens your web app in Chrome, follows the steps you describe and turns them into a narrated tutorial video, with the controls highlighted and your own voice on the soundtrack.

Read the quick start View the source on GitHub
Capture, speech and rendering run on your Mac.
1080p MP4, captions and a transcript.
dealer.walkthrough Scene 01 / 04
Masked, highlighted, captioned 1080p MP4
Now showing Open the invitation Set up your dealer account, a sample tutorial
PASSWORD MASKED
BEFORE IT HITS DISK.
Pick a scene

The cut ↘

How it works

From brief
to final cut.

Each stage saves its output before the next one starts. Change one line of narration and only that clip and its scene are rebuilt. A failed run never overwrites a good export.

  1. 01

    Write the brief

    Say who the tutorial is for and what they'll achieve, then list the steps in flow.yaml along with what should be on screen after each one.walkthrough init · walkthrough plan

  2. 02

    Capture

    Chrome performs each step on your local app and screenshots the result. Sensitive fields are blacked out before anything is saved.walkthrough capture

  3. 03

    Storyboard

    Check every frame, its highlight and its masks on one page. Move a highlight or change a crop if the suggestion is off.walkthrough storyboard · walkthrough annotate

  4. 04

    Script

    Narration is drafted from the labels that were actually on screen. Nothing can claim success before the outcome was captured.walkthrough script draft

  5. 05

    Narrate

    Import your own recordings, which get caption timing automatically, or use a local clone of your voice.walkthrough narrate

  6. 06

    Render

    FFmpeg assembles zooms, callouts, title cards, crossfades and captions into a 1080p video. Preview renders are watermarked.walkthrough render --preview

  7. 07

    Approve and export

    Approve the storyboard, script and visuals. Edit anything afterwards and that approval is cleared until you approve again.walkthrough approve · walkthrough export

House rules

It stops
instead of guessing.

A tutorial that shows the wrong button does more harm than no tutorial. When the app doesn't match the plan, capture pauses and tells you why.

Only what it saw
Narration can only describe steps that were captured, using the labels that were on screen.
Masked at capture time
Passwords, fields you list and likely-sensitive text are blacked out before a screenshot is written. Masks it's unsure about block export until you confirm them.
Careful with your data
Navigation is limited to domains you allow. Steps that change data need your permission and are never repeated without a reset.
Your voice, with consent
Voice enrolment requires you to confirm the voice is yours, and a voice can't be used until you've heard and approved a sample.
TerminalExit code 2
$ walkthrough capture dealer.walkthrough
PAUSED [LOCATOR_NOT_FOUND] Step "save": no visible button "Set password" on http://localhost:3000/invite
  → The interface may have changed. Similar labels on the page: "Create password". Update the step's target in flow.yaml.
Other pause codes cover unexpected dialogs, expired sessions, CAPTCHAs, navigation off the allowlist and data changes that weren't allowed.
Quick start

Roll camera.

Install the CLI, start your app locally with demo data, and make your first project. walkthrough status tells you the next step at any point.

You'll need:

  • A Mac with Apple silicon
  • Node.js 22 or later, and pnpm
  • Google Chrome
  • FFmpeg: brew install ffmpeg
  • Optional, for local speech: uv
# Install
git clone https://github.com/exiscosoft/walkthrough.git
cd walkthrough
pnpm install
pnpm build && pnpm link --global

# Make a project, then describe the steps in flow.yaml
walkthrough init dealer.walkthrough \
  --name "Set up your dealer account" \
  --url http://localhost:3000/invite
walkthrough plan dealer.walkthrough
walkthrough capture dealer.walkthrough

# Narrate with your own recordings and render a preview
walkthrough script draft dealer.walkthrough
walkthrough voice use dealer.walkthrough --engine import
walkthrough narrate dealer.walkthrough --from-dir recordings/
walkthrough render dealer.walkthrough --preview
With Claude Code

Or just ask.

The repository includes a Claude Code skill. Claude plans the flow, runs the capture, writes the narration from what was captured and walks you through review.

Make a walkthrough video showing how a dealer accepts an invitation and sets a password.

Copy skill/walkthrough into your app's .claude/skills/, or link it into ~/.claude/skills/ to use it in every repo. Then ask for a video or run /walkthrough.

Claude stops for the decisions that are yours: which data-changing steps to allow, checking the masks, and the three approvals. Masked screenshots and page snapshots are sent to your model provider when Claude reads them. If you'd rather avoid that, write the flow and script yourself.

Set up the skill
Programme

Now showing,
coming soon.

Walkthrough is an early technical proof. The full pipeline works and is tested end to end.

NowPhase 1

Technical proof

CLI, capture and masking, rendering, recorded narration, the speech sidecar, a benchmark harness and the Claude Code skill.

NextPhase 2

MVP

An interactive storyboard editor, brand presets and a privacy review screen, after a speech benchmark and a proof run on a real app.

LaterPhase 3

Pilot

Three to five marketers making ten or more tutorials. After that: continuous recording, multilingual narration and recapture when the UI changes.

About voice cloning: local voice cloning hasn't passed its benchmark on 8 GB machines yet, so importing your own recordings is the reliable way to narrate for now. Some speech model weights, such as F5-TTS, are licensed for non-commercial use only.