feat: Browser-based demo recording for HTMX and Inertia documentation

[cofin]

Summary

VHS (our current demo GIF tool) only records terminal sessions. To create demos for browser-based features like HTMX JSON templating and Inertia.js page navigation, we need browser recording automation.

Features Needing Browser Demos

HTMX JSON Templating

• Show jinja-htmx example running in browser
• Demonstrate clicking "Load Books from JSON API" button
• Show client-side rendering with ls-for, ls-if, ls-else directives
• Capture the progressive enhancement pattern

Inertia.js Page Navigation

• Show SPA-style navigation between pages
• Demonstrate URL changes without full page reload
• Show props passing between pages

Potential Solutions

1. Playwright - Headless browser automation with video recording

   • npx playwright codegen for recording
   • Built-in video capture
   • CI-friendly

2. Puppeteer - Similar to Playwright

   • puppeteer-screen-recorder package

3. Cypress - E2E testing framework

   • Built-in video recording
   • Good for demonstrating user flows

4. Manual recording - Screen capture tools

   • OBS, Loom, etc.
   • Convert to GIF with ffmpeg
   • Less reproducible

Acceptance Criteria

• Choose browser recording tool
• Create reproducible recording scripts
• Generate GIFs under 5MB
• Integrate with make docs-demos if possible
• Document the process in CONTRIBUTING.md

Related

• VHS demo GIFs PRD: specs/active/vhs-demo-gifs/prd.md
• Documentation drift prevention PRD: specs/active/docs-drift-prevention/prd.md

Labels

documentation, enhancement