Webreel

lastmod 2026-04-10created 2026-04-101 edits

A CLI tool that automatically records browser demos as MP4 videos. Define actions in a JSON config file, and headless Chrome captures them automatically and encodes them with ffmpeg.

About

• Define actions such as clicking, typing, and dragging in a JSON config file, and headless Chrome runs automatically, captures at ~60fps, and encodes with ffmpeg
• Cursor animations, a keystroke HUD overlay, and sound effects can be composited into the video
• Output format can be MP4 (default), GIF, or WebM (VP9)
• pause, click, key, type, scroll, wait, screenshot, drag,

moveTo, navigate, hover, select, and more: 12 action types supported

• Chrome and ffmpeg are downloaded automatically to ~/.webreel on first run — no separate environment setup needed
• webreel init: Scaffolds a new config file; includes $schema for IDE autocompletion
  • record : Runs video recording; supports watch mode with --watch and --verbose mode
  • preview : Previews the scenario in a browser window without actually recording
  • composite : Recomposites from saved raw recordings and timelines (no re-recording needed)
  • validate : Checks the config file for errors before recording
  • The include field lets common steps be reused (e.g., sharing setup steps such as closing a cookie banner)
• Provides many examples: drag and drop, handling login, mobile viewport recording, multi-select, generating multiple videos from a single config, capturing PNG screenshots at the same time, and more

See also

• Headless Chrome
• ffmpeg
• Browser Automation
• TypeScript
• Vercel
• Screencast

Favorite site

• webreel
• webreel GitHub
• webreel - A CLI tool that automatically records browser demos as MP4 videos