Flowcorder

Local-first CLI and Composer for automated web app demo videos.

pnpm add -D flowcorder
pnpm flowcorder init
pnpm flowcorder doctor
pnpm flowcorder run example
pnpm flowcorder open
pnpm flowcorder compose create <capture-id>
pnpm flowcorder compose zoom add <compose> --start 1 --end 3 --scale 1.8 --pan 60,40
pnpm flowcorder compose render <compose>

Project Shape

my-app/
  flowcorder.config.ts
  flowcorder/
    auth/
    fixtures/
    flows/
  .flowcorder/
    <capture-id>/
    composes/
      <compose-id>.flowcorder-compose.json
    composed/

flowcorder/ contains authored source files. .flowcorder/ contains generated captures, persisted compose projects, and rendered videos.

Compose CLI

Compose projects are plain JSON files that compile to Flowcorder's renderer input.

flowcorder compose create <capture-id> --name "Landing clean cut"
flowcorder compose show <compose-path-or-id> --json
flowcorder compose validate <compose-path-or-id> --strict --fix
flowcorder compose set <compose-path-or-id> --preset landscape-1080p --frame browser-chrome
flowcorder compose clip add <compose> --in 1.2 --out 8.4
flowcorder compose zoom add <compose> --start 2 --end 4.5 --scale 1.8 --pan 50,35 --post hold
flowcorder compose compile <compose> --output project.json
flowcorder compose render <compose> --output clean-cut.mp4

The older flowcorder compose <capture-id> path remains as a compatibility alias for flowcorder compose quick <capture-id>.

Authentication

If your app needs a signed-in session, point auth.setup at a Playwright script in flowcorder.config.ts, then capture reusable storage state:

flowcorder auth setup   # runs your auth.setup hook and saves storageState

Authoring API

import { defineFlow } from "flowcorder";

export default defineFlow({
  id: "example",
  name: "Example Flow",
  description: "Open the app and capture the first screen.",
  estimatedDuration: "10s",
  async run({ page, app, step, pause }) {
    await step("open", "Open the app", async () => {
      await page.goto(app.url("/"), { waitUntil: "networkidle" });
      await pause(800);
    });
  },
});

The top-level flowcorder entry exposes the authoring API (defineConfig, defineFlow, defineComposition, and their types). Advanced runtime surfaces are available behind explicit subpath imports:

import { compose } from "flowcorder/compose";
import { readComposeProject } from "flowcorder/compose-project";
import { generateVoiceover } from "flowcorder/voiceover";
import { generateAvatar } from "flowcorder/avatar";