ObjectStackObjectStack

UI Engine

Apps, views, dashboards, themes, and public portals — server-driven UI declared as metadata and rendered by the ObjectUI runtime.

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.
  • Themes define palettes, typography, and spacing as metadata — the CRM example ships light and dark theme variants.
  • Portals open a scoped slice of the app to external audiences, including 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

Apps

App metadata: navigation, branding, entry points

Views

Grid, kanban, calendar, gantt, map, and more

Pages

Page metadata and layout composition

Dashboards

Dashboard metadata, charts, and datasets

Forms

Public and internal form patterns

Doc Pages

Ship package documentation rendered in the console

Setup App

The built-in administration UI

Recipes

Create form ≠ edit form

Different layouts per form mode

Field grouping & order

Control form structure

Audience-based interfaces

Different UIs per audience

Collect data from the public

Anonymous portal routes end to end

On this page

UI EngineThe building blocksWhat's in this moduleRecipesRelated