The editor runtime

The Studio is local-first: every edit applies to an in-memory store instantly, then syncs in the background. Below, that exact runtime is running with a seeded design system — and no backend at all.

Runtime · seeded design systemInteractive

42components

183tokens

In-memory · no backend

Component name

Edits dispatch renameComponentMutation through the real reducer — the list on the left updates live.

A real seeded library on the actual Studio runtime — the same store, reducer, and mutation hooks the app uses, with an in-memory gateway instead of a database. Rename a component; the round-trip is real.

#How it works

Edits are expressed as mutations — small, serializable units of change. Dispatching one applies it to an optimistic store through a pure reducer, the UI re-renders from the new state, and the change is queued to a gateway for persistence.

The gateway is injected. The Studio uses one that persists to its database; this page uses an in-memory gateway, so the very same components run with zero backend. That separation is why these docs can host a fully interactive editor with no server of their own.

What you're editing

The list starts from a seeded library of ~50 components — the same starting point a new project gets. Renaming dispatches the real rename mutation through the real reducer; the list updates live. See Components & structure for the model behind it.