HowTo Recorder drives a real browser through a flow you describe declaratively, then hands back a finished video — animated cursor, AI voiceover, karaoke subtitles, and an optional push to YouTube. It works against any web app.
| Demo flow | Tutorial | Short | |
|---|---|---|---|
| Turned on by | no title: | title: | format: short |
| Resolution | 1920×1080 | 1920×1080 | 1080×1920 |
| Output | .webm | .mp4 | .mp4 + subtitles |
| Login | visible | behind a title card | never in the video |
| Audio | none | voice + music | voice at 1.1× + music |
name: howto-create-user
title: "How do I create a user?"
fadeOut: 1.5
steps:
- login
- wait.ready
- narrate: In this tutorial I'll show you how to add a user.
- click.text: Users
narrate: We open the user list.
highlight: Users
- wait.url: /users
- fill:
Name: Ada Lovelace
narrate: We type the name.
- click.button: Create
narrate: One click and the user is saved.
- wait.idleSelectors, login, formats, subtitle styling and the YouTube target all live in
recorder.config.yaml. Presets ship for WordPress, Next.js,
React-Admin, Filament, Vuetify and Django.
Widgets a generic click cannot reach get their own actions. The bundled Filament plugin covers custom selects, a TipTap editor and Fabric.js canvases.
--preview records silently and pulls one frame per planned
narration point, so you can check the wording against the real picture
before spending a single speech-synthesis credit.
Upload to YouTube, order the playlist, and delete again — with a sidecar that stops a second run from creating a duplicate video.