Web Demo Recorder
Turn a point-and-click list of 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.
Build steps in a simple form (Click → Button → "Sign Up", Type → Email → "test@email.com",
Click → Button → "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.
- 🧩 Structured actions — pick an action kind, then the element type (button, link, input,
dropdown, checkbox, icon…) and its name. No guessing, no AI, no flaky text matching.
- 🎯 Precise element targeting — because you name the element type, the recorder builds an
exact Playwright
getByRole(role, { name }) locator. If it isn't found, you get a clear,
role-aware error instead of a wrong click.
- ✍️ Typo tolerant — a small misspelling of a name auto-corrects to the closest match; a
near-miss gets a "did you mean …?" hint instead of a bare failure.
- 🧭 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.
- 🎞️ MP4 output that plays everywhere (QuickTime/Finder/Slack), with ffmpeg fetched once on
first use. Falls back to
.webm if unavailable.
- 🧱 Multi-action form — add/remove action rows, set a playback speed, then Record.
Quick start
- Open your web app project in VS Code.
- Run Start Demo Recording from the Command Palette (
⇧⌘P / Ctrl+Shift+P).
- For each action, choose a kind and fill in the dropdowns/fields it needs (e.g. Click a
Button named
Sign Up; Type / Fill the Email field with test@email.com). Add as many
rows as you need, then click Record demo.
- The extension launches your app, performs the actions, and saves the video to
.demo-videos/ in your project.
Action kinds
| Action |
What you specify |
| Click |
element type (button/link/image/icon/checkbox/…) + name + optional occurrence |
| Type / Fill |
how to find the field (label/placeholder) + field name + value + clear-first |
| Select dropdown |
dropdown name + option (type defaults to Auto-detect; Native/Custom is an advanced override) |
| Check / Uncheck |
check or uncheck + checkbox/radio + name |
| Hover |
element type + name |
| Press key |
a key (Enter/Tab/Escape/Arrows/…) + optional modifiers |
| Scroll |
top / bottom / up / down / to a named element |
| Wait |
a fixed time, or until text/an element appears |
| Go to |
a URL or app-relative path |
| Expect / Verify |
text is visible, an element exists, or the URL contains a string |
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.
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) 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.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: Download FFmpeg for MP4 — fetch ffmpeg for MP4 conversion.
- Web Demo Recorder: Install Browser — download the Chromium build used for recording.
How it works
The pipeline is build steps → detect → launch → record → convert → stop, with a vscode-free
core so the logic is fully testable. The form serializes directly to structured step objects that
the recorder maps to Playwright locators. See ARCHITECTURE.md for the full design.
Privacy & notes
- 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.
- No action text or page content leaves your machine — there is no AI/cloud step in the pipeline.
Tips for clean recordings
Before recording, the extension pre-warms your app off-camera so the video doesn't open on a
blank/compiling page. Static sites, Express, and production builds then record cleanly from the first
frame. Heavy dev-mode SPAs (e.g. Vite/Next/CRA) still take a few seconds to compile their module
graph on first load — for the most polished demo, point the recorder at a production/preview build
(e.g. set autoDemo.startCommand to vite preview after a build) or at an already-running server.
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.
- Element targeting is exact-by-role: if the type or name is wrong, the step fails with a clear
error rather than guessing.
- 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.
| |
