My app records its own tutorials now

Description and use

Automated recording and video creation workflow for an app using headless Chrome, CDP, ElevenLabs, and ffmpeg, saving hours of manual effort.

Creating multiple tutorial videos manually was time‑consuming, error‑prone, and required on‑camera presence.

Eight concise, captioned tutorial videos produced automatically, saving hours of manual effort and ensuring consistency across episodes.

1. Launch headless Chrome pointing at localhost app
2. Execute a script that clicks real UI buttons
3. Capture each frame via Chrome DevTools Protocol
4. Draw a fake cursor element that flashes on clicks
5. Send a spoken script to ElevenLabs clone and receive audio + word timings
6. Map spoken terms to written tokens (e.g., "localhost three thousand" → "localhost:3000")
7. Generate captions that sync to word timings
8. Use ffmpeg to stitch frames and audio into MP4
9. Add a Digital Craft Workshop card overlay
10. Reset any changed configuration after recording

I built a thing that records the app for me.

Chrome films its own frames over the debugging protocol, one image per repaint, lossless, and ffmpeg stitches them into a 1080p video afterward.

ElevenLabs with a clone of mine. When it returns the audio it also hands back the timing of every word.