@zuilib/builder

The reusable authoring surface for @zuilib/apps. It includes the searchable app library, template-driven creation flow, four-region builder, responsive preview, data/action/state navigation, component inspector, permission simulation, bottom diagnostics, version history, and reviewable AI proposals.

Persistence, data execution, identity, AI models, and deployment remain host adapters; the package owns the interaction model and serializable changes.

The canvas and component catalog are registry-driven. Registered native React elements and typed components from any component library render, bind live data, dispatch actions, and remain editable without using ZUI primitives. ZUI primitives style the builder's own authoring controls only; they are not a requirement for product components placed on the canvas.

Install

pnpm add @zuilib/builder

React and React DOM are the required peers. For Tailwind v4:

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

Usage

import AppBuilder from '@zuilib/builder/app-builder'
import {createViewRegistry} from '@zuilib/apps'
import {coreViewTypes} from '@zuilib/apps/core'

const registry = createViewRegistry(coreViewTypes)

<AppBuilder
  app={app}
  registry={registry}
  datasets={datasets}
  actions={actions}
  onSave={(app, patches) => saveApp(app, patches)}
  onPublish={(app, request) => publishApp(app, request)}
/>

app is an AppSpec and registry a ViewRegistry from @zuilib/apps. The builder tracks its own AppPatch list unless patches/onPatchesChange are passed, so it also works fully controlled.

Entry points

| Import | Exports | | --- | --- | | @zuilib/builder | Every component and type below, re-exported from the package root. | | @zuilib/builder/app-builder | AppBuilder, the four-region builder surface, plus AppBuilderProps, AppBuilderAssistant, BuilderLog and the BuilderMode/BuilderPreview/BuilderLeftPanel/BuilderBottomPanel types. | | @zuilib/builder/app-library | AppLibrary, a searchable app list, plus AppLibraryProps and AppLibraryItem. | | @zuilib/builder/create-app | CreateAppDialog, the template-driven creation flow, plus blankApp, defaultAppTemplates and the CreateAppInput/CreateAppMode/CreateAppSource/AppTemplate types. | | @zuilib/builder/permissions | PermissionSimulator and simulatePermissions, plus PermissionSimulatorProps and PermissionSimulation. | | @zuilib/builder/publish | PublishDialog, plus PublishDialogProps and PublishRequest. | | @zuilib/builder/platform-shell | PlatformShell, the host application chrome, plus PlatformShellProps, PlatformNavigationItem and PlatformArea. | | @zuilib/builder/app-health | AppHealth, a runtime metrics and incidents view, plus AppHealthProps. | | @zuilib/builder/tailwind.css | Tailwind v4 source registration for the package's own classes. |