The Cockpit admin UI

How an App contributes operator screens and merchant settings to the Cockpit — declared, never shipped as components — and how your function reads a resolved setting at runtime.

Declaring the UI

How the Cockpit renders

cockpit.json, the four top-level keys, and why an app never ships UI code.

Settings

The settings.json reference — types, scopes, vocabularies, sensitive values and validation.

Reading settings

c.settings() and the market → tenant → default → fallback resolution order.

Vocabularies

Letting a merchant extend a set of values your app offers.

Preview locally

See your screens before you deploy them.

Your app can add screens to the Cockpit, and a merchant can configure it. Both are declarations: an app never ships UI code.

text

cockpit.json  ──► navigation, list / detail / form views, dashboard widgets
settings.json ──► a Cockpit settings form + per-market resolution
                  └──► c.settings() in your function, already resolved

There are no Vue components, no bundles, and no component names to export. You declare a view's shape with a type and the Cockpit dispatches to a built-in renderer that reads and writes your entity for you.

That is not a limitation to work around; it is what makes a dozen apps compose into one coherent sidebar, and what gets authentication, tenant context, permissions, pagination, loading states and error states right in one place instead of thirteen.

Where the full reference lives

This group covers the App Studio angle: that your app declares its UI, the top-level shape of cockpit.json, how your app claims a place in the sidebar, settings.json end to end, and reading a resolved setting at runtime.

The per-view-type reference — every column type, field type, filter, action kind and widget option — is documented with Commerce Studio, and that is deliberately the only copy. Commerce Studio is the shell that renders these views, so the renderer's own surface is documented there rather than duplicated here. Read How the Cockpit renders for the shape, then go there for the field lists.

The authoritative contract for both files is the JSON Schema — https://schemas.revenexx.com/cockpit.schema.json and https://schemas.revenexx.com/settings.schema.json. Point your editor at them; it is faster than any page.

In this group

How the Cockpit renders — cockpit.json and the composition model.
Settings — the settings.json reference.
Reading settings — c.settings() and the resolution order.
Vocabularies — merchant-extensible value sets.
Preview locally — the local loop.

Commerce Studio — the full cockpit.json view reference.
Person permissions — who sees which view.
CRUD — the routes a view's write and an api action call.