What it does

json-render is a Generative UI framework for turning natural-language prompts into interfaces. Instead of letting a model write arbitrary markup, you describe a catalog of allowed components, prop schemas, and actions; the model's output is JSON constrained to that catalog, and a renderer turns the spec into a UI README.

The same catalog pattern is reused across renderers: React, Vue, Svelte, Solid, React Native, Remotion video, React PDF, React Email, Chat SDK cards (Slack/Teams/Discord), Ink terminals, images via Satori, Three.js scenes, Next.js and TanStack Start apps README. @json-render/shadcn adds 36 ready-made shadcn/ui components, with a Svelte counterpart.

Beyond rendering, the framework covers SpecStream streaming so partial specs can be shown as the model responds, catalog-derived system prompts, conditional visibility, dynamic props, actions including a built-in setState, and state watchers README. A devtools adapter provides a spec tree, state editor, action/stream logs, catalog browser, and DOM picker for React, Vue, Svelte, and Solid.

It suits frontend and full-stack teams that want AI-driven personalization or template generation while keeping control over which components and actions can appear.

Quick start

With Node and npm available, install the core and a renderer. For React:

npm install @json-render/core @json-render/react

For React plus pre-built shadcn/ui components, also install @json-render/shadcn; alternative renderers are listed in the README package section README.

1. Define a catalog with Zod prop schemas and action descriptions using defineCatalog and schema from @json-render/react/schema.
2. Implement matching components with defineRegistry from @json-render/react, returning { registry }.
3. Render an AI-generated spec with <Renderer spec={spec} registry={registry} /> README.

The spec is a flat object with a root key and an elements map; each element has type, props, and children. To run the local docs, playground, and demos, clone the repository and run pnpm install followed by pnpm dev, then open the docs/playground and example dashboards listed in the README README.

Usage constraints

The catalog is the security and reliability boundary: components and actions outside it should not reach the renderer, so you must keep the catalog and registry in sync and implement every catalog entry. Output is predictable only insofar as the schemas are accurate.

Features are renderer-specific. Streaming, devtools, and full-app support depend on the chosen package; for example, devtools requires the matching framework adapter, image rendering requires @resvg/resvg-js, and Chat SDK cards depend on the Chat SDK. Next.js and TanStack Start renderers add routing, layouts, and SSR rather than plain component rendering.

The experimental Jev composition mode requires pinning exact package versions README. The project is Apache-2.0 licensed LICENSE.

HotRepo's take

On 2026-09-20 and 2026-09-21 json-render recorded 585 and 291 stars gained on the all-language daily list, and on 2026-11-08 it reached 11th place on the TypeScript daily list with 202 stars gained, against 19,411 total stars. That is a strong signal of interest in the generative-UI space, but the recorded data is sparse and does not establish sustained momentum.

The more useful signal is practical: an early HN commenter reported using similar JSON-templated UI at work successfully for about six months, then struggling when someone nested conditionals eight levels deep and having to write a linter for the templates HN discussion. json-render's catalog guardrails, conditional visibility, and dynamic props address the authorization side, but the maintainability problem of deeply nested specs is a design concern teams should plan for. The bundled devtools and catalog-derived prompts are reasonable mitigations worth evaluating in a real project.