# objectui is the view layer of a three-tier stack, and only one tier is free

> A schema-driven React renderer where agents emit JSON instead of component code, split across four installation paths depending on who owns the backend, and shipped as a pnpm monorepo with per package releases and an unusual failure mode for unresolved expressions.

**objectstack-ai/objectui** — The schema-driven UI engine for the AI era: agents write compact JSON; Object UI renders production React — grids, kanban, dashboards, Gantt, visual designers. 

- Repository: https://github.com/objectstack-ai/objectui
- Website: https://www.objectui.org
- Stars: 34 · Forks: 7
- Language: TypeScript
- License: MIT
- Published: 2026-08-23 · Updated: 2026-08-23 · Language: en
- Canonical page: https://hysenlabs.com/projects/objectstack-ai-objectui

## Describe, Render and Operate are three separate products

The README places Object UI inside a three line stack, and the split matters commercially as much as technically. Describe is ObjectStack, described as the open-source protocol, toolkit and production runtime. Render is Object UI, this repository, which turns JSON or metadata into React UI. Operate is ObjectOS, described as the commercial runtime environment for cloud and enterprise. Object UI is positioned as the View layer of that ecosystem, a standalone schema-driven renderer that works against any backend, with Amis and Formily named as the kinds of comparable tool, or that can render ObjectStack applications end to end. The stated reason schema-driven rendering suits agents is scale: a model hand-writing React across fifty screens would drown, while emitting and refactoring compact schemas keeps every screen consistent by construction.

## Four entry points depending on who owns the backend

The Quick Start is a table rather than a single instruction, with one row per starting position. To render a JSON schema inside an existing React app, install `@object-ui/react` and `@object-ui/components` and start from `examples/hello-world`. To embed views in an app that has its own backend, install `@object-ui/app-shell`, `@object-ui/plugin-view` and `@object-ui/providers` and start from `examples/byo-backend-console`, which brings your own routing, your own auth and your own API. To stand up a complete console against an ObjectStack backend, fork `examples/console-starter`. To build a UI from a JSON file with no React code at all, install `@object-ui/cli` globally. The package set changes with the row, so picking the wrong one leaves you installing a renderer you do not need or a shell you cannot feed.

## Importing the components package is the registration step

The Basic Usage sample makes one point explicit in a comment, and it is the kind of detail that saves an afternoon. Importing the package registers every default renderer as a side effect, and there is no separate registration call. The sample shows the whole surface: `PredicateScopeProvider` and `SchemaRenderer` imported from `@object-ui/react`, then a bare `import '@object-ui/components'` whose only job is to install the renderers. The schema itself is plain data, a page containing a grid with three columns and three statistic entries labelled Total Users, Revenue and Orders, each with a value written as an expression such as `${stats.users}`. Nothing in that object is a component reference. The screen is described entirely by types and field names, which is what makes the same schema renderable by an agent and by a person.

## An unresolved expression comes back as its own source text

The quietest failure mode in the system is spelled out at length, and it is worth reading twice. Expression scope reaches the renderer through the provider rather than through a prop on the element, and `SchemaRenderer` declares exactly one prop, `schema`, forwarding everything else to whatever component the schema names. So a value passed as `data={…}` is neither read nor refused: the expression that wanted it is returned as its own source text, with nothing thrown and one line on the console. The same rule governs the copy-paste schemas, where a `${name.…}` reads the root name off the scope the host published, and a head name nothing published is not an error. In practice a misspelled binding or a missing provider renders the literal expression inside your screen instead of failing the build, which is a deliberate trade but a real debugging cost.

## The no React path is three CLI commands

The shortest route in the README avoids React entirely, which is the clearest demonstration of the schema in, UI out claim:

```bash
npm install -g @object-ui/cli
objectui init my-app      # scaffold an app with a sample schema
cd my-app
objectui dev app.json     # dev server on http://localhost:3000
```

Scaffolding produces a sample schema, and the dev server reads the named JSON file, so the editing loop is a text editor against `app.json`. Two notes apply to the other examples. `hello-world` ships no dev server, so its `App.tsx` and `schema.json` are meant to be copied into a Vite or Next.js app of your own. `schema-catalog` is a data package rather than an app: it holds the canonical JSON schemas the documentation renders, a smoke test mounts, and agents use as a few-shot corpus, which makes it the piece to read if you want to see the shape of what the renderer expects.

## A pnpm monorepo on Node 22.11 with Turbo and Vitest projects

The root package is named `object-ui-monorepo`, marked private, ESM by way of a `type` field of `module`, and pinned to `pnpm@10.31.0`. The engine requirement is Node 22.11 or later and pnpm 10 or later. Four workspace globs cover the layout: `packages/*`, `examples/*`, `apps/*` and `docs`. Builds run through Turbo, and the default build target deliberately excludes the documentation site, with a separate `build:all` that does not. Tests run through Vitest and are split by project rather than by file: `test:unit` selects the unit project, and `test:integration` selects two DOM projects named dom and dom-heavy. There is also a dist-only test scoped to the components package, plus coverage runs, a UI mode, and several type-check entry points including separate configs for the end-to-end suite, scripts and the Vitest setup files.

## Releases are published per package, not as one tag

The three most recent releases are named after npm packages rather than after the repository: `@object-ui/types@17.5.0`, `@object-ui/sdui-parser@17.5.0` and `@object-ui/runner@17.5.0`, all published on the same day in mid August 2026. That is the practical thing to check before pinning a version, because there is no single tag that tells you what state the whole renderer is in. The counters are 31 stars, 7 forks and 101 open issues, which is an unusual ratio for a repository of this size and worth a look before you file your own issue against it. The tree itself is large and mostly about process rather than runtime: five Playwright configurations including import and live variants, several Vitest setup files with names describing global leak and network escape guards, an `eslint-rules/` directory, a `patches/` directory, `skills/` with a lock file, and typedoc configuration. Licence is MIT, and the documentation site is at objectui.org.

## Conclusion

objectui fits teams who want screens generated from metadata rather than written by hand, and it suits the bring your own backend path best since that one keeps your routing, auth and API. Read the failure behaviour before you commit: an expression whose scope was never published comes back as its own source text instead of throwing, so a typo in a data binding shows up as a literal string rather than an error. Check the issue tracker and the per package release tags before depending on a version, since the packages are published individually rather than as one release.

## FAQ

### What is objectui used for?

It turns a JSON schema, or ObjectStack metadata, into React UI without writing component code. One schema can drive dashboards, Gantt schedules, kanban boards and calendars, with visual designers for building them without code.

### Which packages do I install to render a schema in an existing React app?

@object-ui/react and @object-ui/components, starting from examples/hello-world. Importing the components package registers every default renderer as a side effect, so there is no separate registration call.

### How do I build a UI with objectui and no React code?

Install the CLI with npm install -g @object-ui/cli, run objectui init my-app to scaffold a sample schema, then run objectui dev app.json for a dev server on http://localhost:3000. You edit app.json to build the UI.

### What happens when an objectui expression references data that was never published?

It is not treated as an error. The expression is returned as its own source text, with nothing thrown and one line on the console. A misspelled binding therefore renders literally on screen instead of failing.

### Can I use objectui against my own backend instead of ObjectStack?

Yes. Install @object-ui/app-shell, @object-ui/plugin-view and @object-ui/providers, then supply your own routing, auth and API as a DataSource plus your own sidebar component. examples/byo-backend-console has a working version with a mock REST adapter.

### What are the runtime requirements for the objectui monorepo?

Node 22.11 or later and pnpm 10 or later, with the package manager pinned to pnpm 10.31.0. Builds go through Turbo and tests through Vitest, split into unit, dom and dom-heavy projects.

## Sources

- [Official documentation](https://www.objectui.org)
- [Official README](https://github.com/objectstack-ai/objectui#readme)
- [Project repository](https://github.com/objectstack-ai/objectui)
- [Release notes](https://github.com/objectstack-ai/objectui/releases)

---

Hysen Labs editorial analysis, written from the project's own repository and release notes. Cite the canonical page: https://hysenlabs.com/projects/objectstack-ai-objectui