Vibeleaderboard
Index / tool
Visit webreel.dev
Category
Developer Tools
Rank
Pricing
Open Source
Type
TOOL
Use case
Design & Media
Interfaces
CLI
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

videobrowserdemoautomationtypescript

Tech Stack

Node.jsTypeScript

Media

WebReel

Comments (0)

No comments yet

Editorially curated, with community endorsements as a secondary signal. Corrections welcome.