UI Engine

The UI engine turns metadata into user interfaces: you declare apps, views, pages, and dashboards as data, and any compliant renderer draws them. This module is the practical documentation for the ObjectUI layer — the UI Protocol specified normatively in the ObjectUI spec. Because the UI is data, it ships inside the same artifact as your schema, respects the same permissions, and can be generated or modified by AI agents through the same typed surface.

An app is a navigation shell over your objects (from the CRM example app):

import { App } from '@objectstack/spec/ui';

export const CrmApp = App.create({
  name: 'crm_app',
  label: 'CRM',
  icon: 'briefcase',
  branding: { primaryColor: '#2563EB' },
  navigation: [
    { id: 'group_sales', type: 'group', label: 'Sales', icon: 'briefcase', children: [
      { id: 'nav_leads', type: 'object', objectName: 'crm_lead', label: 'Leads', icon: 'funnel' },
      { id: 'nav_accounts', type: 'object', objectName: 'crm_account', label: 'Accounts', icon: 'building' },
    ]},
  ],
});

The building blocks

• Apps group navigation, branding, and entry points for one audience.
• Views present object records as grid (the standard data table), kanban, gallery, calendar, timeline, gantt, map, chart, or tree. Forms are their own view kind with per-mode layouts (Views).
• Pages compose free-form layouts from widgets; Dashboards combine charts, reports, and datasets for analytics.
• Branding colours an app: app.branding.primaryColor / accentColor drive the console's --primary / --accent variables. (The standalone themes collection was retired in spec 17.1, ADR-0049 — it was parsed but never applied.)
• Public forms expose a scoped slice of an object to external audiences through anonymous entry routes for public data collection (Forms, public data collection).
• The Setup App — the platform's built-in administration UI — is itself rendered from the same protocol (Setup App).

What's in this module

Recipes

Related

• Spec: UI as Data Concept, Layout DSL, Action Protocol, Widget Contract
• Schema reference: UI, Studio
• Neighbors: the records a view shows come from Data Modeling; what a user is allowed to see is decided by Permissions & Identity; buttons that run logic call into Automation.