@zuilib/apps · v0.5.0

Build a view your team can keep changing.

@zuilib/apps turns your data and component registry into serializable views that people and models can create, validate, render, and refine. Start with one analytics screen; add pages, actions, policies, and release controls when it becomes an application.

Start with analytics Read the Apps guide →

Artboard · the editor page, with its assistant

light · 100%

Create, inspect and refine a real ViewSpec.

This is ViewWorkbench from @zuilib/apps/workbench. Select and edit blocks, drag their layout, open the inspector, ask the assistant for a patch, preview JSON and undo the result. The canvas, validation, model context and stored changes all use the same registry and view document.

App lifecycle · build, run, govern, inspect

light · 100%

The whole lifecycle is live above.

The second example wraps those views in an AppSpec. Build edits the real spec as reviewable patches. Run executes that composed spec with mock host adapters; switch identities and the Finance-only page appears or disappears. Govern evaluates the same policies and live telemetry. Inspect JSON proves the authored application is still data. Use the builder’s canvas, inspector, responsive mode, validation, assistant, history and publish controls—they are package components, not screenshots. The authoring controls come from @zuilib/builder.

01Define the applicationAppSpec makes pages, resources, state, actions, policies, environments and release targets one serializable contract. A product is inspectable, diffable and portable before it renders.

02Create every page as a viewEach page is a ViewSpec rendered from the component vocabulary you register. Charts, grids, AI surfaces, workflow controls and your own components use the same bindings and patch format.

03Connect the host onceAdapters execute data, actions, policy checks, persistence, confirmations and telemetry. The spec contains names and intent; credentials and business logic stay in your host.

04Validate, review and publishHuman gestures and AI edits produce AppPatch transactions. Validate the composed result, review a versioned diff, simulate permissions and publish the same spec to every supported surface.

ViewSpecThe portable JSON page contract: nodes, bindings, actions, responsive layout and the registry vocabulary.Data and filtersOne dataset schema drives controls, grids, charts, metrics, validation and model context.Human and AI editingInline edits and model proposals produce the same reviewable, undoable patch operations.AI generationGenerate and stream valid views from the exact vocabulary and schemas in your registry.AppSpec and runtimePages, resources, variables, actions and adapters: the complete serializable application contract.The complete builderFour-region authoring, responsive previews, validation, versions, collaboration and AI patch proposals.Governance and releasePolicy simulation, environment gates, immutable versions, publish targets, auditability and operational health.Operational componentsApprovals, writeback, scenarios, comments, audit history, task queues and run history slot directly into a view.Host-owned integrationsBring any semantic layer, warehouse, API, workbook, policy engine and observability stack through small adapters.

Install

pnpm add @zuilib/apps

# Optional authoring and operational view types
pnpm add @zuilib/builder
pnpm add @zuilib/workflows

# app.css (Tailwind v4 host)
@import "tailwindcss";
@import "@zuilib/primitives/tailwind.css";
@import "@zuilib/apps/tailwind.css";

Run

import {AppRuntimeProvider, PublishedApp, defineApp} from '@zuilib/apps'
import {createViewRegistry} from '@zuilib/apps'
import {coreViewTypes} from '@zuilib/apps/core'
import {chartViewTypes} from '@zuilib/apps/charts'
import {workflowViewTypes} from '@zuilib/workflows/view-types'

const registry = createViewRegistry(
  coreViewTypes, chartViewTypes, workflowViewTypes)

const app = defineApp({
  version: 1,
  id: 'revenue-ops',
  name: 'Revenue operations',
  pages: [{id: 'overview', path: '/', title: 'Overview', view}],
  resources, variables, actions, policies, environments, publishTargets,
})

<AppRuntimeProvider app={app} subject={user}
  environment="production" adapters={hostAdapters}>
  <PublishedApp registry={registry} />
</AppRuntimeProvider>