Getting started

With Node.js and Chrome, Edge or Chromium there is nothing to install. This page gets the demo app running and renders a first clip.

Requirements#

• Node.js 22 or newer. Check with node --version.
• Chrome, Edge or Chromium. browser-clip drives it headless over the DevTools protocol and finds it in the usual places; set CHROME_PATH to choose one.
• Nothing else. No dependencies and no install step: fonts, the keyboard sound and the video muxer are bundled. Chrome and Edge encode H.264, which every video editor opens.

Where browser-clip lives#

browser-clip is an agent skill: a folder with instructions for AI agents and the tool they run.

browser-clip/
  SKILL.md                     what agents read first
  .claude-plugin/plugin.json   the Claude Code plugin manifest
  agents/openai.yaml           Codex metadata
  references/script.md         every key, step, target and command
  references/schema.json       the JSON Schema, for editors
  references/examples/         six complete scripts
  scripts/browser-clip.mjs     the command-line tool
  scripts/app/                 the compose engine, the renderer and the studio

The pages call the tool browser-clip. In a checkout it is node browser-clip/scripts/browser-clip.mjs; an alias saves typing:

alias browser-clip='node /path/to/browser-clip/scripts/browser-clip.mjs'

function browser-clip { node C:\path\to\browser-clip\scripts\browser-clip.mjs @args }

To let Claude Code or Codex use the skill, see agents.

The demo app#

Every clip in these pages films a small web app that comes with the repository, Acme Projects. Serve it on port 5173, where the clips and the bundled examples point:

node docs-src/serve.mjs

Keep it running in its own terminal while you follow the tutorial.

A first clip#

init writes a commented starter script; validate checks it:

browser-clip init my-clip.yaml --url http://localhost:5173
browser-clip validate my-clip.yaml

$ browser-clip validate overview.yaml
overview.yaml: 0 errors, 0 warnings, 0 hints

render captures the take (the first time) and writes my-clip.mp4 next to the script:

browser-clip render my-clip.yaml

The take is cached in .browser-clip/ next to the script. Render again after changing the camera, the speed or a caption, and the browser does not run again; change an action, and it does.

Next#

The tutorial builds a clip step by step. Concepts explains the take and video time.

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