Introduction

uidex is a static-analysis + runtime tracking system for UIs. It scans your source for data-uidex* attributes and export const uidex declarations, emits a typed registry (uidex.gen.ts), and powers a dev-time overlay with an inspector, command palette, and detail panels.

Eight entity kinds make up the registry — routes, pages, features, widgets, regions, elements, primitives, and flows — each discovered by convention or annotation.

How it works

1. Annotate — add data-uidex attributes to interactive elements, declare acceptance criteria with export const uidex, and write Playwright flows tagged @uidex:flow.
2. Scan — npx uidex scan walks your source, extracts annotations, resolves conventions, and emits uidex.gen.ts with typed id unions.
3. Mount — the SDK mounts a Shadow DOM overlay in dev mode. Hover highlights annotated elements, click opens an element menu, and ⌘K opens the command palette.
4. Audit — npx uidex scan --audit validates annotation coverage, flags missing acceptance criteria, and checks that flows cover declared criteria.

Where to go next

• Getting started — install, scan, mount, and verify.
• Entity model — the eight kinds and how each is discovered.
• DOM annotations — data-uidex* attributes and authoring rules.
• export const uidex — the module-scoped authoring surface.
• Playwright flows — wire end-to-end tests into the registry.
• uidex scan — full CLI reference.
• Views and actions map — the SDK's view graph.