browser-clipdocs

browser-clip

Scripted, repeatable demo videos of web apps. A YAML script says what to do in a browser and how to film it; browser-clip captures a real headless browser and composes the video.

overview.yamlDownload
title: Create a project
browser:
  url: http://localhost:5173
  viewport: 1280x800
camera: auto
speed: auto
script:
  - goto: /
  - click: New project
    id: new
  - type: Launch plan
    into: { label: Name }
  - type: { into: { label: Owner email }, text: dev@example.com }
  - click: Create
    id: create
  - wait: { text: "Project created: Launch plan" }
    pause: 1.5
The script above, rendered. The browser ran it once; the camera, the speed-up of the slow save, the pointer and the keyboard sound were composed afterwards.

What it does#

  • Captures a real browser. It loads the pages and clicks the buttons, with a pointer that moves like a hand and typing with human rhythm and typos, and keeps the frames and an event log: the take.
  • Films the take. The camera, the speed, the pointer, the browser window, captions, title cards and sound are composed from the take, so changing them never runs the browser again.
  • Exports MP4 with keyboard sound, GIF, PNG frames (with a transparent background, and the sound as a WAV), stills, and contact sheets to check a clip at a glance.
  • For agents and people. Agents write the scripts with a reference, a JSON Schema, templates and a guided workflow; people tune them in the studio, a live preview bound to the file.

Where to go next#

  • Getting started: requirements, the demo app and the first commands.
  • Concepts: the take, compose and video time, in five minutes.
  • The tutorial builds clips step by step; the guides cover real apps, games, vertical clips, montage with terminal-clip and agents.
  • The script reference lists every key, and the examples come with the skill.

Warning

browser-clip runs scripts for real: it loads the pages and clicks the buttons. Point it at local servers, fixtures or staging, and mock the data the viewer sees. Never let a script buy, send, publish or delete anything on a real account. See real apps, safely.

Source: docs-src/pages/index.md · browser-clip 0.1.0