Skip to main content

What is webreel?

webreel is a CLI tool that records scripted browser videos as MP4, GIF, or WebM files. Define your demo steps in a JSON config (clicks, key presses, drags, pauses) and webreel drives a headless Chrome instance, captures screenshots at approximately 60fps, and encodes the result with ffmpeg.
Chrome and ffmpeg are downloaded automatically on first use to ~/.webreel if not already installed.

Key features

Scripted automation

Define clicks, typing, scrolling, and other actions in JSON configs. Automate complex browser interactions with precision.

Rich overlays

Animated cursor with smooth motion, keystroke HUD for keyboard shortcuts, and customizable themes.

Multiple formats

Export as MP4, GIF, or WebM. Generate thumbnails and PNG screenshots at specific points in your demo.

Zero setup

Chrome and ffmpeg download automatically on first run. No manual installation required.

Flexible viewport

Record at any dimensions, including mobile sizes. Control zoom level and browser viewport settings.

Reusable steps

Share common setup steps across videos using includes. Perfect for dismissing cookie banners or logging in.

Quick example

Here’s a simple config that opens a page and clicks a button:
{
  "$schema": "https://webreel.dev/schema/v1.json",
  "videos": {
    "hello-world": {
      "url": "https://example.com",
      "viewport": { "width": 1920, "height": 1080 },
      "steps": [
        { "action": "pause", "ms": 500 },
        { "action": "click", "text": "Get Started", "delay": 1000 }
      ]
    }
  }
}
Run webreel record and you’ll get a polished MP4 video with smooth cursor animation and professional-looking effects.

Get started

Quickstart

Record your first video in under 5 minutes

Installation

Install webreel and verify your setup

CLI commands

Explore all available commands and options

Configuration

Learn about all config options and actions

Use cases

Product demos

Create polished product demo videos for landing pages, social media, or sales presentations.

Documentation

Generate video tutorials and walkthroughs to complement written documentation.

Testing artifacts

Record browser interactions during testing to capture bugs or document test scenarios.

Onboarding flows

Show new users how to get started with step-by-step video guides.

Build docs developers (and LLMs) love