Screenboard

Screenboard generates a Figma-like infinite canvas of real UI screens and user flows by running your app in Playwright and producing a static, shareable board.

• Router-agnostic: URLs + browser interactions only.
• Real browser rendering (Playwright), not static rendering.
• Studio is a separate web UI — no in-app overlays or panels.

Quick start

pnpm install

# Run the demo app
pnpm --filter vite-react-demo dev

# In another terminal, capture with the CLI
pnpm --filter screenboard build --baseUrl http://localhost:5173

# Open the generated board
open screenboard/index.html

Studio

pnpm --filter screenboard studio --baseUrl http://localhost:5173 --open

Studio lets you launch a controlled browser, capture screens, record flows, and save screenboard.json.

Agent mode

pnpm --filter screenboard agent --open

Agent mode scans the codebase for routes and data-testid values and writes .screenboard/suggestions.json before launching Studio.

Config files

• screenboard.config.ts – user-owned config
• screenboard.json – generated by Studio

Example config:

import { defineConfig } from "@screenboard/core";

export default defineConfig({
  app: {
    baseUrl: "http://localhost:5173",
    command: "pnpm dev"
  },
  output: {
    dir: "screenboard",
    title: "My App"
  },
  viewports: [
    { id: "desktop", name: "Desktop", width: 1280, height: 720 }
  ],
  states: [
    { id: "default", name: "Default" }
  ],
  screens: [
    { id: "home", name: "Home", url: "/" }
  ],
  flows: [
    {
      id: "checkout",
      name: "Checkout",
      steps: [
        { type: "goto", url: "/" },
        { type: "click", selector: { testId: "cta-upgrade" } },
        { type: "capture", name: "After CTA" }
      ]
    }
  ]
});

Workspace layout

packages/
  cli     # screenboard CLI (bin: screenboard)
  core    # runner, config types, capture logic, manifest, viewer generator
  studio  # Vite + React web UI
  agent   # static codebase scanner → suggestions
examples/
  vite-react-demo