json-render

json-render is a Generative UI framework from Vercel Labs that lets AI generate dynamic, personalized interfaces from natural-language prompts without sacrificing reliability. You define a catalog of allowed components and actions, and the model can only produce JSON that matches your schema—so output is guardrailed, predictable, and safe to render.

The @json-render/core package is the framework-agnostic engine: it defines catalogs, validates AI output against Zod schemas, diffs and streams updates, and coordinates actions. It pairs with renderer packages for React, Vue, Svelte, Solid, React Native, and even Remotion video, React PDF, email, terminal (Ink), and 3D—so a single component catalog can target many platforms.

What You Get

• A framework-agnostic core for defining component catalogs and validating AI-generated JSON
• Zod-based schemas that guarantee model output matches your allowed components every time
• Progressive streaming and diffing so UIs render incrementally as the model responds
• Renderer packages for React, Vue, Svelte, Solid, React Native, video, PDF, email, and more

Common Use Cases

• Building AI chat experiences that render rich, interactive UI instead of plain text
• Generating personalized dashboards or forms from natural-language prompts
• Rendering the same AI-driven catalog across web, mobile, and other platforms
• Constraining LLM output to a safe, predictable component set for production apps

Under The Hood

Architecture @json-render/core is the framework-agnostic heart of a large monorepo (30+ packages). Its src/ contains the catalog and schema layer plus runtime machinery: actions.ts/action-observer.ts for interactivity, diff.ts for incremental tree updates, directives.ts and edit-modes.ts for behavior, and streaming support. Platform packages (react, vue, svelte, solid, react-native, remotion, react-pdf, ink, next, react-three-fiber, and the batteries-included shadcn) consume the core to map its validated tree onto concrete components.

Tech Stack The core is TypeScript with a single runtime dependency on Zod 4 (used as the schema/validation backbone) and is bundled with tsup. The wider repo uses shared eslint/typescript configs and a workspace layout, targeting an ecosystem from web to mobile, video, PDF, email, terminal, and 3D.

Code Quality The core package ships colocated tests (actions.test.ts, action-observer.test.ts, directives.test.ts, devtools-flag.test.ts, and more), indicating solid unit coverage of the runtime logic. As a Vercel Labs project with 15k+ stars and active maintenance, it follows disciplined TypeScript conventions and per-package changelogs.

API Design The developer model—defineCatalog, register components, hand the model a constrained schema—is clean and the guardrail concept is intuitive. The learning curve comes less from the API and more from designing a good catalog and integrating a model/streaming pipeline; the cross-platform surface and devtools packages help, but the framework introduces genuinely new concepts to learn.