← Reddit

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

Reddit · SpeedyBrowser45 · June 9, 2026
A developer automated tutorial video generation for web applications by combining Claude Code with Playwright to produce fully polished walkthroughs with synced voiceovers, annotations, background music, and branded end cards. The process involves having Claude analyze app pages and generate annotated scripts, creating timestamped audio through TTS services, recording user interactions with Playwright while triggering UI annotations at precise moments, and using ffmpeg to composite the components into finished videos at minimal cost. The approach enables rapid translation into additional languages by regenerating voiceovers over the same video recordings.

Detailed Analysis

A software developer has documented a fully automated pipeline for generating production-quality tutorial and sales videos for web applications, built entirely around Claude Code as the orchestrating intelligence. The workflow, shared on the ClaudeAI subreddit, chains together Claude Code, Playwright, ElevenLabs or Gemini TTS, OpenAI Whisper, and ffmpeg to produce polished 1080p walkthrough videos with synchronized voice-over, animated cursor movements, UI annotations, background music with sidechain compression, and branded end cards — all without manual editing. The developer demonstrated the output with a real-estate CRM application called BricksDeck, producing a complete video and then a Hindi-language variant in minutes by simply re-generating the voice-over from a translated script and re-stitching it over the same recording.

The technical architecture is notable for how it decomposes a complex creative production task into discrete, LLM-orchestratable steps. Claude Code first analyzes the target application's pages and co-authors a structured script file containing user actions, narration copy, and UI annotation targets. It then generates the Playwright automation script that drives a real browser session, fires annotations at precise timestamps derived from TTS character-alignment data, and records the session natively. A sync marker — a single colored frame at t=0 — solves the longstanding problem of aligning separate audio and video streams. Claude Code subsequently writes the ffmpeg composition commands that layer audio, apply loudness normalization, and append the end card. The developer has further abstracted the entire pipeline into a reusable Claude Code skill and subagent, reducing subsequent video jobs to little more than pointing the system at a new set of screens.

The cost and accessibility implications of this approach are significant. Traditional tutorial video production requires either substantial manual effort or subscription fees for tools like Supademo or Arcade, neither of which deliver fully automated output. This pipeline's per-video cost is described as a few cents of TTS compute, representing a dramatic reduction in both time and expense for developers shipping multiple products. The multilingual capability is particularly illustrative: because the visual recording is entirely decoupled from the audio track, localization becomes a near-zero-marginal-cost operation rather than a full re-shoot, which has direct implications for global software distribution.

The developer's candid caveats reveal the genuine boundaries of current LLM-driven automation. Claude Code handles production reliably but cannot substitute for human editorial judgment — the developer caught the system writing Hindi narration in English syntactic word order, a transliteration error that would have produced unnatural output. Selector brittleness and timing calibration also require iterative passes per application, meaning the pipeline is not truly fire-and-forget. The technical gotchas documented — session storage token loss on browser restart, `networkidle` failures on long-polling SPAs, and ffmpeg's inability to render complex scripts like Devanagari — reflect the kinds of integration friction that emerge when chaining browser automation with AI generation at the edges of standard tooling support.

This use case fits into a broader pattern of developers leveraging Claude Code as a meta-programming layer that writes and executes specialized scripts rather than performing tasks directly. Rather than Claude Code manipulating video files itself, it acts as a coordinator that generates purpose-built Playwright drivers, ffmpeg commands, and TTS API calls — each optimized for its specific function. This composability, where the LLM serves as an intelligent glue layer between existing professional tools, has become one of the defining characteristics of how Claude Code is being adopted in production engineering workflows in 2025 and 2026, enabling individuals to compress workflows that previously required dedicated roles in design, narration, and video production.

Read original article →