UI Lab

A UI Lab is a small dev-only page inside a web app that renders real production UI in deterministic scenarios. It is for states that are hard or slow to reach by clicking through the live app: expired auth, empty/error states, long-content overflow, loading/success/failure panels, large tables, dialogs, popovers, and similar product surfaces.

Keep it lightweight. Start with the smallest useful path and add polish only when the scenario set grows.

Adapt naming and APIs to the target framework, build tool, router, and test runner.

Not for: a real Storybook/Ladle install the user explicitly wants; a full design-system catalog; backend-only work.

Basic shape

Use these five pieces unless the existing app already has a clearer equivalent.

1. Scenario contract — a minimal record describing one renderable UI state.
   • Include: id, title, optional description, render target/component/view, and a fresh fixture factory such as createProps, createState, or setup.
   • Use ids like <group>/<state> so they work in URLs and tests.
   • The fixture factory must create fresh data for every render so mutable state does not leak between scenarios or tests.
   • Do not add controls, viewport metadata, knobs, or custom schema until there is a real need. If a scenario needs layout, size, an anchor, or a controller, use a small wrapper/stage component instead.