AI builds your UI, but only from approved parts

What it does

json-render is a framework that sits between an LLM and your frontend. You define a catalog of allowed components and actions—complete with Zod schemas and descriptions—and the AI responds by emitting a flat JSON spec rather than raw code. A framework-specific renderer turns that JSON into actual UI across React, Vue, Svelte, Solid, or React Native. It is essentially a typed assembly kit: the model picks the pieces, but it cannot manufacture new ones.

The interesting bit

The architecture decouples generation from rendering: the same catalog can target web, mobile, terminal, video, PDF, or 3D scenes depending on which renderer package you plug in. The framework also streams and progressively renders the JSON as the model generates it, turning a text stream into a living interface without waiting for the full response. That treats the LLM as a layout engine constrained by your type system.

Key highlights

• Guardrailed generation: AI can only use components and actions explicitly defined in your catalog with Zod schemas.
• Cross-platform renderers: One catalog feeds React, Vue, Svelte, Solid, React Native, Next.js, Remotion, React PDF, React Email, Ink, and React Three Fiber.
• Progressive streaming: The UI renders spec updates as they arrive from the model, not just at the end.
• Batteries included: Ships with 36 pre-built shadcn/ui component definitions and matching implementations.
• Ecosystem adapters: Includes devtools, state management bridges (Redux, Zustand, Jotai, XState), MCP server support, and YAML wire formats.

Verdict

Worth a look if you are building AI-native products where reliability matters more than creative freedom, or if you need the same LLM-driven layout to span multiple platforms. Skip it if you want AI to write arbitrary, bespoke components rather than assemble them from a fixed kit.