Web Demo Recorder

1# Web Demo Recorder

Turn a list of plain-English actions into a demo video of those actions performed in a real browser against your localhost web app — without writing a single line of test code.

Type "click Sign Up, type test@email.com into Email, click Submit" and get a clean .mp4 (or .webm) walkthrough in your project's .demo-videos/ folder.

Features

🎬 Records a real browser via Playwright's internal screencast — no screen-recording permission, no extra windows.
📝 Plain-English actions — a simple command grammar that works offline, plus optional GitHub Copilot parsing (free tier works) for free-form phrasing.
🧭 Auto-detects your app — reads package.json/README to find the start command and port, launches it, waits for the port, and shuts it down afterward.
🎯 Forgiving element matching — "username" finds an Email field; captions, input type, placeholders and synonyms are all considered. Clear errors when something truly isn't on the page.
🎞️ MP4 output that plays everywhere (QuickTime/Finder/Slack), with ffmpeg fetched once on first use. Falls back to .webm if unavailable.
🧱 Multi-action form — one box per action, add/remove rows, then Record.

Quick start

Open your web app project in VS Code.
Run Start Demo Recording from the Command Palette (⇧⌘P / Ctrl+Shift+P).
Fill in one action per box (e.g. click Sign Up, type test@email.com into Email, click Submit), then click Record demo.
The extension launches your app, performs the actions, and saves the video to .demo-videos/ in your project.

Requirements

VS Code 1.90+.
Chromium for Playwright — the recorder drives a Chromium build. On your first recording the extension offers to download it automatically (~150 MB, one time); you can also run the Install Browser command or npx playwright install chromium yourself.
(Optional) GitHub Copilot (incl. the free tier) for free-form action parsing. Without it, the built-in command grammar is used. The extension can install/sign-in for you on first use (Web Demo Recorder: Set Up Copilot).
(Optional) ffmpeg for MP4 output — offered as a one-time ~30 MB download on first use (Web Demo Recorder: Download FFmpeg for MP4), or use a system ffmpeg if installed.

Settings

Setting	Default	Description
`autoDemo.parser`	`auto`	`auto` (regex first, Copilot when unsure), `regex` (offline grammar only), or `llm` (always Copilot).
`autoDemo.videoFormat`	`mp4`	`mp4` (convert via ffmpeg; falls back to `.webm`) or `webm` (raw Playwright output).
`autoDemo.startCommand`	`""`	Override the command used to start your app (e.g. `npm run dev`). Blank = auto-detect.
`autoDemo.port`	`0`	Override the port your app listens on. `0` = auto-detect.

Commands

Start Demo Recording — open the action form and record.
Web Demo Recorder: Set Up Copilot — install/sign in to Copilot for smart parsing.
Web Demo Recorder: Download FFmpeg for MP4 — fetch ffmpeg for MP4 conversion.
Web Demo Recorder: Install Browser — download the Chromium build used for recording.

Action grammar (offline)

When Copilot isn't used, actions are written as commands:

Pattern	Example
`click <label>`	`click Sign Up` · `click the Submit button`
`type <value> into <field>`	`type test@email.com into Email` · `enter 1010 for Password`
`press <key>`	`press Enter` · `hit Tab`
`scroll <where>`	`scroll to the bottom` · `scroll up`
`go to <path>`	`go to /about`
`wait <time>`	`wait 1s` · `wait 500ms`
`expect / should see <text>`	`should see Account created`

Separate actions with commas, semicolons, newlines, or "then". With Copilot enabled you can also write free-form ("log in with a test account, then open settings").

A playback-speed slider in the recording form (0.5×–2×, 1× centered) controls how fast the demo plays — it scales the pauses between actions, typing speed, and the scroll animation.

How it works

The pipeline is parse → detect → launch → record → convert → stop, with a vscode-free core so the logic is fully testable. See ARCHITECTURE.md in the repository for the full design.

Privacy & notes

Copilot: when used, your action text is sent to GitHub Copilot's model via VS Code's Language Model API (one request per recording, only when needed). Free-tier usage counts against your monthly Copilot chat-request quota.
ffmpeg: downloaded over HTTPS from the pinned ffmpeg-static GitHub release into the extension's storage; nothing is installed system-wide.
Recordings are written only to your project's .demo-videos/ folder.

Known limitations

Requires a Chromium build for Playwright — auto-offered as a one-time download on first record (or via the Install Browser command).
MP4 needs ffmpeg (system or the one-time download); otherwise output stays .webm.
First use may show one-time prompts (Chromium download, Copilot setup, ffmpeg download).
Opening a folder that isn't a web app gives a clear "No web app found" error.

Development

npm install        # installs deps + Playwright Chromium
npm test           # headless unit + e2e tests
npm run test:vscode # VS Code host integration test (needs a display)
npm run package    # build the .vsix

License

Licensed under the MIT License — see the LICENSE file.

Kaashish Venkataramanan