Views

A view is a named screen in the app, identified by a URL route. Views are where components and requests get scoped, and where most authoring happens.

version: 1

views:
  - name: FlightSearch
    route: /search
    description: Main search page with date and origin/destination pickers
    source: src/pages/FlightSearch.tsx
    components:
      - name: DepartureDatePicker
        selector: '[data-picker="departure"]'
    requests:
      - name: SearchFlights
        route: /api/flights/search
        method: POST

name and route are required. description and source are documentary — they aren’t surfaced at runtime but pay for themselves in PR review and future maintenance. See Schema reference for every field.

Route matching

Routes use glob patterns against the URL pathname.

* matches exactly one path segment: /users/* matches /users/42, not /users/42/edit.
** matches any depth of segments: /admin/** matches /admin, /admin/users, and /admin/users/42/edit.
Literal segments match themselves.
Matching is case-sensitive. Query strings and fragments are ignored. Trailing slashes are normalized away before matching.

For requests, Express-style :param segments are normalized to *, so /api/users/:id/orders and /api/users/*/orders are equivalent. See Requests.

First match wins

Definition order is priority order. List more-specific routes before more-general ones.

views:
  - name: UserSettings
    route: /users/me/settings   # specific — listed first
  - name: UserProfile
    route: /users/*             # general — matches everything else under /users/

If the order were flipped, /users/me/settings would match UserProfile and UserSettings would never fire.

Scoped vs global

Components and requests can live at the file root or nested inside a view.

Global (file root): matched against every view.
View-scoped (inside a view): matched only when that view is active.
They are additive. A view defines its own components on top of any globals; both apply.

components:
  - name: Navigation                # global — matched on every view
    selector: 'nav[data-component="Navigation"]'

views:
  - name: Dashboard
    route: /dashboard
    components:
      - name: DashboardLayout       # scoped — only on /dashboard
        selector: '[data-component="DashboardLayout"]'

Components covers selector strings, arrays, and nesting rules. Requests covers method filters and route normalization.

Views

Route matching

First match wins

Scoped vs global

Next