Screenbook

Declare screens in code, auto-generate screen catalog, navigation graph, and impact analysis.

Get Started | View on GitHub

Features

Code-First Definition

Define screen metadata in TypeScript alongside your routes. Type-safe, version-controlled, and always in sync with your code.

Navigation Graph

Visualize how users flow through your application with auto-generated Mermaid diagrams.

Impact Analysis

Know which screens are affected when APIs change. Analyze PR impact before merging.

CI Integration

Prevent documentation drift with lint checks. Fail CI when screens are missing metadata.

Quick Example

src/pages/billing/invoices/screen.meta.ts

import { defineScreen } from "screenbook"

export const screen = defineScreen({
  id: "billing.invoice.list",
  title: "Invoice List",
  route: "/billing/invoices",
  owner: ["billing-team"],
  tags: ["billing", "invoice"],
  dependsOn: ["InvoiceAPI.list"],
  next: ["billing.invoice.detail", "billing.invoice.create"],
})

Why Screenbook?

• 5-minute setup: Install, init, and see your first screen catalog
• Framework agnostic: Works with Next.js, Vite, Remix, Nuxt, Astro, and more
• Progressive adoption: Start with one screen, expand gradually
• Zero runtime overhead: All metadata is build-time only