- Category
- Developer Tools
- Rank
- No. 790Tools index
- Listed in
- #4 Record a product demo
- Pricing
- Open Source
- Type
- TOOL
- Use case
- Design & Media
- Interfaces
- CLI
- Builder
- vercel-labs
- GitHub
- 949 stars
- Latest release
- v0.1.4
- Date
About
Record scripted browser demos as video. Define a flow once, replay it consistently for marketing clips, docs, and changelog snippets.
What it does
WebReel drives a headless Chrome instance through a sequence of actions, clicks, keystrokes, drags, scrolls, hovers, defined in a JSON file, and turns the resulting capture into a finished video. It overlays an animated cursor and an on-screen keystroke display as it runs, then encodes the result with ffmpeg into MP4, GIF, or WebM. Because the steps live in a config file rather than a live take, the same walkthrough can be re-run later to produce a matching result once the underlying page changes.
Why it's ranked here
WebReel ships as a labeled experiment from Vercel Labs rather than a stable 1.0 release, so the roadmap should be treated as fluid. What exists is concrete: an installable command-line tool backed by a separate automation library, a documented schema for the step format, and eleven distinct step types covering clicks, drags, scrolling, hovering, and dropdown selection. Apache-2.0 licensing and a published package mean nothing has to be vendored or built from source to try it.
What's good
Setup friction is low: the tool fetches its own Chrome build and ffmpeg binary the first time it runs, so nothing extra needs installing by hand. A separate re-encode step turns a saved take into another output format without repeating the browser pass, handy when a different file type is needed after the fact. Cursor movement and an on-screen key-press display are built in rather than added afterward in an editor. A visible dry-run mode plays a take without saving it, and a validation command catches configuration errors before an actual pass runs.
Tradeoffs
The step list is written by hand or scaffolded from a template. There is no capture mode that watches a live browsing session and generates the steps automatically, so building a video means describing every click and pause yourself. Automation runs against Chrome specifically. Labeled an active experiment rather than a finished product, the project carries no stability guarantee, and the interface is command-line only, so it suits a scripted or repeatable workflow better than an ad hoc one-off recording.
How to use it well
This fits teams producing repeatable marketing or changelog videos where the same steps need to run identically after a UI ships: install the package, scaffold a config against the target page, iterate with the visible preview mode, then run a validation pass before the real capture. It is not a screen-capture tool for narrating live demos or ad hoc bug reports, since every action has to be declared in advance; for that kind of unscripted recording, a live-capture tool is a better fit.
Technical notes+
The CLI entry point in packages/webreel/src/index.ts wires six commander subcommands (record, init, validate, preview, composite, install) to implementations that live in the separate @webreel/core package, which exports the CDP connection helper, the Chrome and ffmpeg cache-directory installers, the cursor and keystroke overlay injectors, the recording context and step actions (click, drag, type, scroll, and others), and a compositor for re-encoding saved timelines. Version lookup in packages/webreel/src/index.ts reads the CLI's own package.json at runtime, falling back to a hardcoded 0.0.0 if that read fails. The two example fixtures read, examples/hello-world/web/index.html and examples/screenshots/web/index.html, are static demo pages used as recording targets for the shipped examples, not part of the library itself.
Observed
- License
- Distributed under the Apache-2.0 license.
- Packaging
- Installed as an npm package with a webreel CLI binary.
- Interfaces
- Interface is command-line only: init, record, preview, composite, install, and validate subcommands.
- Packaging
- Organized as a two-package monorepo: a core automation library and a separate CLI package.
- Testing
- Declares Vitest as its test runner in the package manifest.
- Dependencies
- Downloads Chrome and ffmpeg binaries to a local cache directory on first use rather than requiring them preinstalled.
- Configuration
- Video steps are declared in a JSON configuration file validated against a published JSON Schema.
- Output formats
- Output formats supported are MP4, GIF, and WebM.
Read from README.md, package.json, packages/webreel/src/index.ts, packages/@webreel/core/src/index.ts, examples/hello-world/web/index.html, examples/screenshots/web/index.html.
What it can do
Record browser interactions as video
Browser navigation and user interactions → Video recording of browser demo
Define scripted automation flows
User-defined sequence of browser actions → Reusable automation script
Replay automation scripts consistently
Previously defined automation script → Consistent repeated execution of browser actions
Generate marketing demo videos
Scripted browser flow → Marketing video clips
Create documentation videos
Scripted browser flow showing software features → Video documentation
Produce changelog video snippets
Scripted browser flow demonstrating new features → Video snippets for changelog updates
Tags
Tech Stack
Media
Comments (0)
No comments yet
Editorially curated, with community endorsements as a secondary signal. Corrections welcome.