Apps

Package: @zuilib/apps · 0.5.0

@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, resources, actions, policies, and release controls when it becomes an application.

If you need a working result before the architecture, begin with Ship an analytics view.

A view is the page-sized building block of an app. Both contracts use the same registry, bindings, renderer, and patch model, so the first analytics screen can grow into a product without being rewritten.

Open the full interactive Apps example to edit a view, inspect its JSON, author a multi-page app, run it as different identities and inspect its policies and health.

For complete product examples, compare the deployable Aegis and Cedarline reference applications. They use the same ZUI packages for two intentionally different enterprise industries, with Go hosts, SQLite, server-enforced policies, custom components, and all three ZUI Cloud.

Views are data

A ViewSpec is an inert JSON tree of typed nodes, props, data bindings and named actions. The registry maps each type to a real React element: native DOM elements, ZUI primitives, charts, the data grid, AI surfaces, the text editor, another design system's components, or your own domain components.

That makes a view safe to store in a database, generate with a model, validate in CI, diff in review and customize per user without serializing executable code. Rows and behavior still come from your host.

Loading example

import ViewRenderer, {createViewRegistry} from '@zuilib/apps'
import {coreViewTypes} from '@zuilib/apps/core'
import {analyticsViewTypes} from '@zuilib/apps/analytics'

const registry = createViewRegistry(coreViewTypes, analyticsViewTypes)

<ViewRenderer
  spec={view}
  registry={registry}
  datasets={{orders: rows}}
  datasetSchemas={[ordersSchema]}
  actions={{openOrder}}
  onFiltersChange={persistFilters}
/>

Start with ViewSpec, then continue through data and filters, customization, and AI generation.

When a view becomes an app

An AppSpec surrounds one or more views with serializable application intent. The host keeps credentials and executable business logic; small adapters run resources and actions, evaluate authoritative policies, persist scoped state and receive telemetry.

import {AppRuntimeProvider, PublishedApp, defineApp} from '@zuilib/apps'

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

<AppRuntimeProvider app={app} adapters={hostAdapters} subject={currentUser}>
  <PublishedApp registry={registry} />
</AppRuntimeProvider>

The runtime loads resources, resolves structured bindings, applies policies to pages and nodes, executes confirmed actions, persists state and emits runtime events. See AppSpec and runtime and governance and release.

Companion packages

Package	Version	Responsibility
`@zuilib/apps`	0.5.0	View and app specs, registry, rendering, bindings, patches, validation, AI context, runtime adapters and telemetry.
`@zuilib/builder`	0.1.0	App library, creation flow, four-region builder, inspector, responsive preview, permission simulation, publishing and health.
`@zuilib/workflows`	0.1.0	Writeback, approvals, scenarios, comments, audit, tasks, notifications, record detail and run history as registered view types.

Entry points

Import	Purpose
`@zuilib/apps`	`ViewRenderer`, registry and schema helpers, `ViewSpec`, `AppSpec`, app runtime, patches, validation and telemetry.
`@zuilib/apps/editor`	Inline `ViewEditor` plus editor patch and insert helpers.
`@zuilib/apps/workbench`	Complete view authoring workbench and assistant panel.
`@zuilib/apps/core`	Core layout, typography, surface, feedback, form and data-display view types.
`@zuilib/apps/charts`	Chart view types.
`@zuilib/apps/analytics`	Analytics view types including pivot, map, drilldown, comparison, forecast and insight blocks.
`@zuilib/apps/data-grid`	Data-grid view types.
`@zuilib/apps/ai`	AI view types plus app prompt/schema helpers.
`@zuilib/apps/text-editor`	Markdown-editor view types.
`@zuilib/apps/view-spec`	The view document types without the renderer.
`@zuilib/apps/view-runtime`	View runtime context and binding access.

Install

pnpm add @zuilib/apps

# Add only the optional presets your registry uses
pnpm add @zuilib/charts
pnpm add @zuilib/data-grid
pnpm add @zuilib/ai
pnpm add @zuilib/text-editor

React and React DOM are the required peers. A Tailwind v4 host registers the Apps source and each optional rendering package it uses:

@import "tailwindcss";
@import "@zuilib/primitives/tailwind.css";
@import "@zuilib/apps/tailwind.css";

Run the repository showcase with pnpm --filter playground dev, then open http://localhost:5173/apps.

Views are data​

When a view becomes an app​

Companion packages​

Entry points​

Install​

Views are data

When a view becomes an app

Companion packages

Entry points

Install