HowTo Recorder — from YAML to a published video

HowTo Recorder — from YAML to a published video An architecture diagram generated by Archify. YAML scenario · scenarios/*.yaml · Architecture component YAML scenario scenarios/*.yaml Scenario parser · Steps, narration, format · Architecture component Scenario parser Steps, narration, format recorder.config.yaml · Selectors, formats, style · Architecture component recorder.config.yaml Selectors, formats, style Action registry · click, fill, scroll, drag … · Architecture component Action registry click, fill, scroll, drag … Plugins · plugins/filament · Architecture component Plugins plugins/filament Playwright Chromium · Cursor, HUD, overlays · Architecture component Playwright Chromium Cursor, HUD, overlays ElevenLabs · Speech + word timings · Architecture component ElevenLabs Speech + word timings ffmpeg · Mix, subtitles, fade · Architecture component ffmpeg Mix, subtitles, fade MP4 + sidecar · videos/<name> · Architecture component MP4 + sidecar videos/<name> YouTube Data API · Upload, playlist · Architecture component · YouTube YouTube Data API Upload, playlist steps format profile resolved steps register() drive the UI narration text mp3 + timings raw webm H.264 + AAC publish Legend Backend Database Cloud Message bus External

Speech comes first

  • • Every clip is synthesized before the browser opens
  • • So the recorded timeline never stalls on an API call

Two seams, one fork

  • • recorder.config.yaml carries selectors, formats and styling
  • • Plugins add actions a generic click cannot reach

One switch, one format

  • • howto records 1920x1080 behind a title card
  • • short records 1080x1920, login pre-authenticated