Skip to main content

@zuilib/builder · v0.1.0

Build the whole app in one workspace.

Builder is the opinionated authoring product around @zuilib/apps. It turns the same view registry, AppSpec and patch contracts into a complete library, creation flow, responsive canvas, inspector, validation, collaboration and release UI.

Builder documentationExplore Apps →
App lifecycle · build, run, govern, inspect
light · 100%

The builder above edits a real app.

Select a node, change its properties, switch breakpoints, inspect validation, ask the assistant for a proposed change, and move through Run, Govern and Inspect JSON. The UI is composed from exported Builder components rather than a static mockup.

01Four stable regionsNavigation and catalogs, a live canvas, generated inspector, and results/log/version panels stay predictable as an app grows.
02One patch historyDrag, insert, prop edits, migrations and AI proposals all become reviewable AppPatch transactions with undo and redo.
03Responsive by designPreview and edit desktop, tablet and phone layouts without maintaining separate page documents.
04Govern before releaseValidate registry references, simulate permissions, inspect diffs and publish immutable versions to declared environments.

Install

pnpm add @zuilib/builder

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

Use

import AppBuilder from '@zuilib/builder/app-builder'

<AppBuilder
  app={baseApp}
  registry={registry}
  patches={patches}
  onPatchesChange={setPatches}
  datasets={previewData}
  environment="staging"
  onSave={saveDraft}
  onPublish={publish}
  assistant={{propose: proposeAppPatches}}
/>