Developer Docs

Build repeatable product demos from code.

Flowcorder is an installable CLI, local capture runner, and local Composer for web app demo videos. The docs are written for both developers and coding agents.

Install

Add Flowcorder as a dev dependency, then run init to create flowcorder.config.ts and the authored flowcorder/ directory.

pnpm add -D flowcorder
pnpm flowcorder init

Capture

Write Playwright-backed flows with defineFlow, then run them headlessly or from the local Studio.

pnpm flowcorder doctor
pnpm flowcorder run onboarding

Compose

Open the local Composer to trim captures, add camera movement, apply frames, and export videos.

pnpm flowcorder open
pnpm flowcorder compose onboarding-123

Project Contract

A consumer app keeps authored Flowcorder files in flowcorder/. Generated captures, screenshots, cursor tracks, and renders go in .flowcorder/.

my-app/
  flowcorder.config.ts
  flowcorder/
    auth/
      login.setup.ts
    fixtures/
      launch-demo.json
    flows/
      onboarding.flow.ts
  .flowcorder/
    onboarding-1778352213555/
      capture.json
      steps.json
      cursor-track.json
      recording.webm
      final.png
    composed/
      onboarding.mp4

First run

Installation

Add the CLI, initialize config, run doctor, and capture the generated example flow.

Local video workflow

Composer

The local timeline for turning captured browser sessions into polished demo videos.

Agent workflow

Point Your Agent Here

A direct recipe for agents to inspect an app, create a flow, run it, and report capture outputs.