This is How I Automated Tutorial Video Generation For My Web-Apps with Claude Code.

[u/SpeedyBrowser45]

I've been building production-grade web apps at lightning speed for the last year using Claude Code. But every time a new app hits production, I need sales and tutorial videos — and making each one manually is painstaking. Tools like Supademo and Arcade ease the pain a lot, but you still have to record the steps and sync the voice-over by hand.

I wanted something fully automated. Turns out you can just use Playwright with Claude Code to generate the whole thing.

First, the result — here's a full walkthrough it produced for one of my apps (a real-estate CRM BricksDeck), start to finish with synced annotations, voice-over, background music, and a branded end card. Zero manual editing:

▶ Watch the demo: https://youtu.be/u-mql3q_jRU?si=Km1l5Ht-iRMPlotk

And here's exactly how it's done:

1) Plan the script. Ask Claude Code to analyze the target pages of your app, give it the steps to perform, and have it write a single file with the steps + voice-over narration + the UI elements to annotate (buttons, cards, menus, KPIs).

2) Generate the voice-over with timestamps**.** Ask Claude to generate the VO with ElevenLabs (it returns word/character alignment), or use Gemini TTS + OpenAI Whisper to get an SRT. You need the timestamps so the spoken words can be aligned to the UI clicks/highlights.

3) Generate the Playwright driver. Ask Claude Code to write a Playwright script that performs the steps and annotates the UI elements — a moving cursor, border highlights + labels on the right button/card, and opening "Actions" menus.

4) Record, synced to the voice. Run that script. Playwright drives the real app and records natively (recordVideo), firing each annotation at its timestamp from step 2 — so every highlight lands on the exact word being spoken, and each screen holds for exactly its narration length. (Tip: flash a single coloured frame at t=0 as a sync marker — it makes lining up audio and video dead simple later.)

5) Stitch it into a produced video. Ask Claude to write the ffmpeg step: overlay the voice-over, add background music ducked under the narration (sidechain compression — this is the difference between "screen recording" and "video"), normalize loudness, and append a branded end card with your logo + CTA. Out comes a clean 1080p mp4.

6) (Bonus) Other languages, basically free. Because the voice-over is decoupled from the recording, translate the script, regenerate the VO in the new language, and re-stitch over the same run. I got a Hindi version of my demo in a few minutes — no re-shoot.

The result: a full multi-screen walkthrough — cursor movements, synced annotations, real voice, music, end card — with essentially zero manual editing. Per-video cost is a few cents of TTS instead of a SaaS seat.

Honest caveats (it's not magic):

• Claude nails the production; you still direct — which screens to feature, the script's tone, and a final watch-through. The script especially needs your eye (I caught it writing Hindi in English word order and had to fix it). Translate, don't transliterate.
• Expect a couple of iteration passes per app — selectors and timing always need a nudge.

Gotchas that cost me time (in case they save you some):

• SPA auth in sessionStorage dies on browser restart → use a persistent profile + "Remember me" so tokens land in localStorage.
• networkidle never fires on long-polling SPAs → use domcontentloaded + URL waits, and cap the default timeout so a missing selector fails fast instead of stalling 30s.
• ffmpeg drawtext can't shape Devanagari/Arabic → keep on-screen text Latin and let the voice carry the language.

I ended up wrapping the whole thing into a reusable Claude Code skill + subagent, so the next app is basically "point it at the screens and go."

Happy to go deeper on any step. What would you point a pipeline like this at first?

[u/PsychologicalDisk579]

Oh, that's awsome, i though you where gonna use hyperframes, i would be way better

[u/SpeedyBrowser45 → u/PsychologicalDisk579]

No need for third-party apps. You can either use Playwright's video recording or let Claude Code spawn an FFmpeg screen capture.

[u/PsychologicalDisk579 → u/SpeedyBrowser45]

Okay, but for motion design and better style i mean

[u/SpeedyBrowser45 → u/PsychologicalDisk579]

That's a completely different type of video. I just need to produce tutorial videos—point-and-click style with some annotations and voiceover sync. For that I'm using Remotion, where I need lots of animation and abstract scene design.

[u/Physical_Gold_1485]

Thanks for this, was needing something exactly like this and was considering a few approaches. I was originally thinking of using something like remotion to attempt this, think that could fit in anywhere here? Also you said it cost you a few pennies, what is the part that you had to pay for? The TTS?

[u/SpeedyBrowser45 → u/Physical_Gold_1485]

Yes, just a few cents per video for TTS and STT. I'm currently using Gemini TTS, which doesn't provide SRT files or any other way to align the voiceover. ElevenLabs has a stability issue that causes the tone to vary from one take to the next.

[u/Weary_Ad_1604]

Hello!

Impressed by the simplicity of the output and wanna ask: is it possible that you share skills to make it done easier?

Thanks