Runnable examples that show how to consume ObjectUI in different scenarios. Pick the one that matches your starting point.
| Example | Use it when… | Backend | Bundle | What it gives you |
|---|---|---|---|---|
hello-world/ |
You want the smallest possible <SchemaRenderer> demo to see the JSON → React pipeline. |
None (in-memory schema) | Tiny | A single App.tsx rendering one schema. |
byo-backend-console/ |
You want to embed ObjectUI into your own app and connect it to your own REST/GraphQL backend. | Bring-your-own (mock REST shown) | ~50 KB | @object-ui/app-shell + @object-ui/providers, custom router, custom DataSource. ~100 lines of integration code, no auth, no plugins. |
console-starter/ |
You want a fork-ready, opinionated console with the full plugin set already wired against an ObjectStack backend. | ObjectStack (/api/v1) |
Full | @object-ui/app-shell ConsoleShell + AuthProvider + every @object-ui/plugin-* (grid, kanban, calendar, charts, dashboard, designer, detail, form, list, report, view, chatbot). |
Rule of thumb:
- Learning the rendering protocol →
hello-world.- Adding ObjectUI to an existing product / different backend →
byo-backend-console.- Standing up a brand-new ObjectStack console → fork
console-starter.
| Directory | What it is |
|---|---|
schema-catalog/ |
Not a runnable app — a data package (@object-ui/example-schema-catalog) holding the canonical JSON schemas consumed by the docs site (<SchemaExample id="…" />), by the smoke test that mounts every entry, and by AI agents as a few-shot corpus. See its README for how to add one. |
byo-backend-console and console-starter are Vite apps. From the monorepo root:
pnpm install
pnpm -w build
cd examples/console-starter # or byo-backend-console
pnpm devEach exposes its own dev server port (see its README).
The other two directories are not dev servers: hello-world is a snippet to drop into
your own Vite/Next.js app, and schema-catalog is a data package verified with
pnpm --filter @object-ui/example-schema-catalog test.
- Create
examples/<name>/withpackage.jsonnamed@object-ui/example-<name>. - Mark it
private: true. - Add an entry to the table above and link its README.
- Reference workspace packages with
workspace:*. - Keep the dependency footprint aligned with the example's purpose — heavy plugins belong in
console-starter, not in lightweight integration demos.