Record scripted browser videos as MP4 files with sound effects, cursor animation, and keystroke overlays.

Documentation | Examples

Define steps in a JSON config (clicks, key presses, drags, pauses) and webreel drives a headless Chrome instance, captures screenshots at ~60fps, and encodes the result with ffmpeg.

Chrome and ffmpeg are downloaded automatically on first use to ~/.webreel if not already installed.

npm install webreel
npx webreel init --name my-video --url https://example.com
npx webreel record

custom-theme - Demonstrates fully customizing the cursor overlay and keystroke HUD appearance using a code editor page.

drag-and-drop - Demonstrates dragging elements between positions on a kanban board.

form-filling - Demonstrates typing into form fields and clicking a submit button, simulating a login flow.

gif-output - Demonstrates outputting the recording as an animated GIF instead of the default MP4.

hello-world - The simplest possible webreel example. Opens a landing page and clicks the call-to-action button.

keyboard-shortcuts - Demonstrates pressing key combos and displaying them in the keystroke HUD overlay. Uses a code editor page as the target.

mobile-viewport - Demonstrates recording at mobile device dimensions using a finance app interface.

modifier-clicks - Demonstrates clicking elements with modifier keys held down, simulating multi-select in a file manager.

multi-demo - Demonstrates defining multiple videos in a single config file, each producing its own output from the same page.

page-scrolling - Demonstrates scrolling the page and scrolling within a specific container element on a blog post layout.

screenshots - Demonstrates capturing PNG screenshots at specific points during a recording. Useful for generating static marketing assets or documentation images alongside videos.

shared-steps - Demonstrates using include to share common setup steps across videos. The shared steps dismiss a cookie consent banner before the main video steps run.

webm-output - Demonstrates outputting the recording as a WebM video using VP9 encoding.

Scaffold a new config file:

webreel init
webreel init --name login-flow --url https://myapp.com
webreel init --name hero -o hero.config.json

This creates a webreel.config.json with a $schema for IDE autocompletion:

{
  "$schema": "https://webreel.dev/schema/v1.json",
  "videos": {
    "my-video": {
      "url": "https://example.com",
      "viewport": { "width": 1080, "height": 1080 },
      "defaultDelay": 500,
      "steps": [
        { "action": "pause", "ms": 500 },
        { "action": "click", "text": "Get Started" },
        { "action": "key", "key": "cmd+a", "delay": 1000 }
      ]
    }
  }
}

Record videos:

webreel record
webreel record hero login
webreel record -c custom.config.json
webreel record --watch
webreel record --verbose

Run a video in a visible browser window without recording:

webreel preview
webreel preview hero
webreel preview hero --verbose

Re-composite videos from stored raw recordings and timelines without re-recording:

webreel composite
webreel composite hero

Download Chrome and ffmpeg to ~/.webreel. Both are also auto-downloaded on first run. Use --force to fix corrupted or broken binaries.

webreel install
webreel install --force

Check config files for errors without running them:

webreel validate
webreel validate -c custom.config.json

webreel --help
webreel --version
webreel record --help

All steps (except pause) accept an optional delay field (ms to wait after the step). Use defaultDelay at the top-level or per-video to set a default.

• Node.js (v18+)
• pnpm

pnpm install
pnpm build

Apache-2.0