Sierra

Routing

File tree · dynamic · catch-all · layouts · groups

Routes come from the filesystem, so the URL structure and the folder structure cannot drift. Layouts nest by directory and groups organize without affecting the path.

src/routes/invoices/index.mesa   → /invoices
src/routes/invoices/[id].mesa    → /invoices/42
src/routes/[...404].mesa         → anything else
src/routes/_module.mesa          → the layout

Frontmatter

Title · guards · render mode, per route

Route metadata lives at the top of the route file rather than in a separate config, so moving a page moves its configuration with it.

Navigation

Guards · hooks · prefetch · scroll restore · slots

A navigation API with before and after hooks, guards that can redirect, link prefetching, and scroll restoration handled rather than reimplemented per app.

Resources

The API's four hook phases, client-side

A Resource binds a service to reactive state, with the identical around/before/after/error phases the server uses. Learn the pipeline once and it holds on both sides.

const invoices = createResource('invoices', {
  hooks: { around: { all: [withSpinner] } },
})
await invoices.find({ status: 'open' })

make()

A blank record shaped by the schema's defaults

Start a create form from the schema itself, with declared defaults already applied and server-owned fields left out. No hand-written initial state to fall out of sync.

invoices.make()
// { total: 0, status: 'draft' }  — id and createdAt omitted

Schema

JSON Schema shipped into the bundle

The build puts your schema in the browser, so the client knows the same field rules the server enforces — without a second copy of them written in a client-side validator.

Targets

spa · static · widget · extension

One route tree, several outputs, chosen at build time. A prerendered marketing page, an embedded widget and a browser extension come from the same components.

Loading

Route loaders · parallel fetch · connection state

Data loading declared per route and resolved in parallel, with live connection state you can render against instead of tracking your own online flag.

Devtools

Routes, resources, requests, events, jobs

An in-page overlay fed by the server's own telemetry, so you see the request, the hooks that ran and the job it queued in one timeline.

Build

Vite · state-preserving HMR · auto-imports

Vite underneath with Mesa compilation, hot replacement that keeps signal state across edits, and auto-imports so common components need no import line.