json-render: Controlled JSON generation for cross-framework AI UIs
An AI UI framework for frontend teams that makes models generate catalog-bound JSON instead of free-form UI.
GitHub vercel-labs/json-render Updated 2026-09-21 Branch main Stars 17.3K Forks 919
TypeScript Generative UI JSON Schema React/Vue/Svelte/Solid React Native

🧭 Decision Guide

Why trending now: Cannot be determined from the provided material

Try it if you

  • You are building a React dashboard where AI must be restricted to Card, Metric, and Button.
    The README “Quick Start” shows the complete defineCatalog, defineRegistry, and Renderer flow.
  • You need one UI catalog shared across React, Vue, Svelte, or Solid.
    The README “Why json-render?” explicitly lists React, Vue, Svelte, and Solid under Cross-Platform.
  • You need to display the UI progressively while the model responds instead of waiting for complete JSON.
    The README “Why json-render?” lists “Stream and render progressively,” and Packages lists SpecStream utilities.
  • You need to generate Next.js apps, PDFs, HTML emails, or Remotion videos from the same spec.
    The README “Packages” lists @json-render/next, @json-render/react-pdf, @json-render/react-email, and @json-render/remotion.

Skip it if you

  • You require Jev composition as a released and stable production capability.
    The README “Demo” labels Jev composition “Experimental” and “Unreleased.”
  • Your target framework is not among the React, Vue, Svelte, Solid, or React Native renderers listed in the README.
    The README “Packages” lists specific framework adapters but does not list other target frameworks.
  • You need the README to define supported model providers, authentication, or production security boundaries.
    The provided README material does not specify model providers, authentication, or production security boundaries.

Requirements

  • For a React project, install: npm install @json-render/core @json-render/react
  • For pre-built shadcn/ui components, install: npm install @json-render/shadcn
  • To run the demo from source, execute git clone, cd json-render, pnpm install, and pnpm dev
  • The React Native example requires npx expo start
  • The README examples use TypeScript, React, Zod, and @json-render/react/schema

First step (verbatim from README)

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

Watch out

  • Do not treat Jev composition as a stable API because the README marks it unreleased.
    The README “Demo” calls it “Experimental Jev composition” and states “Unreleased.”
  • When choosing Svelte, account for the Svelte 5 renderer and runes-based reactivity.
    The README “Packages” describes @json-render/svelte as a “Svelte 5 renderer with runes-based reactivity.”
  • For 3D capabilities, install @react-three/fiber, @react-three/drei, and three as additional dependencies.
    The README React Three Fiber installation command lists these dependencies.
  • Dashboard actions must be explicitly declared in the catalog, such as export_report and refresh_data.
    The README “Define Your Catalog” example declares export_report and refresh_data under actions.

Not stated in the README

  • The README does not specify supported AI model providers or corresponding SDK versions.
  • The README does not specify minimum Node.js, browser, or React versions.
  • The README does not describe handling for JSON generation failures, schema validation failures, or model timeouts.
  • The README provides no performance data for SpecStream across different models and UI sizes.
  • The README does not explain permission control, authentication, or side-effect isolation for catalog actions.
  • The README does not explain the maintenance commitment represented by 10 contributors and 5 releases.

💡 Deep Analysis

6
Yes I maintain a React product and want to use the project's 36 shadcn/ui components so AI can generate a controlled dashboard. Can this prevent nonexistent components and invalid properties?
For: A React product engineer who wants to add an AI dashboard quickly using the 36 pre-built shadcn/ui components

Yes, this is a good fit because the React renderer, component catalog, and schema constraints directly match this use case, although they do not guarantee that the dashboard’s business meaning is correct.

  • AI can use only the components placed in the developer-defined catalog; it does not generate arbitrary components or frontend code.
  • Props can be constrained with schemas; the README describes the result as “JSON output matches your schema”.
  • @json-render/shadcn provides 36 components based on Radix UI and Tailwind CSS, reducing the work needed to register basic UI components.
  • You still need to define the catalog, component registry, and actions; business-specific components are not created automatically.
  • Why json-render?: “AI can only use components in your catalog”
  • Why json-render?: “JSON output matches your schema, every time”
  • Packages: `@json-render/shadcn` — 36 pre-built shadcn/ui components
  • How It Works: “Define the guardrails - what components, actions, and data bindings AI can use”
npm install @json-render/shadcn
Not stated in the README：The README does not specify which business controls are covered by the 36 components or the default Props Schema for each component.；The README does not provide generation accuracy for different models, prompts, or complex layouts.
Yes I already use Next.js and want AI to generate more than a component tree, including routes, layouts, SSR, and metadata. Can json-render cover this level?
For: A full-stack engineer using Next.js who needs AI-generated pages with routes, layouts, SSR, and metadata

Yes. The README positions Next.js support as rendering full applications rather than only individual React components, although route authorization and business services are not automatically solved by the JSON Spec.

  • The description of @json-render/next explicitly includes routes, layouts, and SSR.
  • The installation example calls it “full Next.js apps (routes, layouts, SSR, metadata)”.
  • The JSON Spec still maps through a catalog and renderer to real implementations; the model cannot bypass the defined capability boundary.
  • The project is primarily TypeScript, which aligns with the Next.js integration, but the README does not promise a complete authentication, data-loading, or deployment solution.
  • Packages: `@json-render/next` — “Next.js renderer — JSON becomes full apps with routes, layouts, SSR”
  • Installation example: `npm install @json-render/core @json-render/react @json-render/next`
  • Installation example: `full Next.js apps (routes, layouts, SSR, metadata)`
  • Project data: main_language is TypeScript
npm install @json-render/core @json-render/react @json-render/next
Not stated in the README：The README does not explain authentication, data loading, caching, or error-boundary integration for generated routes.；The README does not specify how SSR handles streamed or incomplete Specs, or what SEO behavior is provided.
It depends I need AI-generated content to be rendered as HTML email, PDF documents, and Remotion videos, while reusing the same JSON UI Spec as much as possible. Is this project suitable for multi-medium output?
For: An application developer who needs structured descriptions rendered as React Email, PDF documents, and Remotion videos

It depends. The project provides dedicated renderers for all three targets and a shared JSON Spec, but email, PDF, and video do not have equivalent layout capabilities; web components cannot be assumed to work unchanged everywhere.

  • The package list includes @json-render/react-email, @json-render/react-pdf, and @json-render/remotion.
  • The installation examples cover HTML/plain-text email, PDF documents, and video respectively.
  • The core JSON Spec and catalog can reuse structured intent, while concrete components and layout behavior remain renderer-specific.
  • Remotion uses a timeline schema, showing that video output has a specialized model distinct from documents and email.
  • Packages: `@json-render/remotion` — Remotion video renderer, timeline schema
  • Packages: `@json-render/react-pdf` — React PDF renderer for generating PDF documents from specs
  • Packages: `@json-render/react-email` — React Email renderer for HTML/plain-text emails from specs
  • Installation examples: `npm install @json-render/core @json-render/remotion`, `@json-render/react-pdf`, and `@json-render/react-email ...`
npm install @json-render/core @json-render/react-pdf
Not stated in the README：The README does not specify which components and layout fields can be reused directly across renderers.；The README does not describe the exact limitations for PDF pagination, email-client compatibility, or Remotion timeline expression.
It depends I need to support React, Vue, Svelte, and SolidJS web renderers while having AI generate only one JSON UI Spec. Can this reduce duplicated interface logic across the four environments?
For: A cross-platform frontend engineer who needs the same interface description to run on React, Vue, Svelte, and SolidJS

It depends. The project explicitly supports multiple web renderers and a shared catalog, but what is shared is the JSON description and design intent—not identical implementation details across all four platforms.

  • The README lists React, Vue, Svelte, and Solid as cross-platform web environments supported from the same catalog.
  • @json-render/core provides schemas, catalogs, AI prompts, and SpecStream, while renderer packages handle platform-specific output.
  • Each platform still needs its own renderer and mappings to real components; platform-specific interactions and layout behavior are not automatically normalized.
  • The separate shadcn/ui and shadcn-svelte packages, each with 36 components, demonstrate that component implementations remain platform-specific.
  • Why json-render?: “Cross-Platform - React, Vue, Svelte, Solid (web), React Native (mobile) from the same catalog”
  • Packages: `@json-render/core` — schemas, catalogs, AI prompts, dynamic props, SpecStream utilities
  • Packages: `@json-render/vue`, `@json-render/svelte`, `@json-render/solid`
  • Packages: `@json-render/shadcn` and `@json-render/shadcn-svelte`
npm install @json-render/core @json-render/react
Not stated in the README：The README does not define the cross-renderer component subset supported by one catalog.；The README does not explain how unsupported platform-specific components are omitted, downgraded, or represented in the JSON Spec.
Yes I am building a mobile product with React Native and want AI to generate forms and information views using only standard mobile components. Is json-render suitable instead of letting the model output arbitrary React code?
For: A mobile engineer building a React Native product who wants natural-language generation of controlled mobile interfaces

Yes, provided that your mobile screens can be expressed through catalog-controlled components and actions rather than arbitrary React Native code.

  • The README provides a dedicated @json-render/react-native renderer and explicitly identifies React Native as the mobile target.
  • AI produces catalog-constrained JSON rather than executable arbitrary JavaScript or React Native source code.
  • The core package includes dynamic props, actions, and SpecStream, which provide the basic model for dynamic forms and state-driven interfaces.
  • Mobile components still need their own implementation or registration; web components should not be assumed to transfer directly to React Native.
  • Installation example: `npm install @json-render/core @json-render/react-native`
  • Why json-render?: “Cross-Platform - React, Vue, Svelte, Solid (web), React Native (mobile) from the same catalog”
  • Packages: `@json-render/core` — dynamic props, SpecStream utilities
  • How It Works: “AI generates JSON” and “what components, actions, and data bindings AI can use”
npm install @json-render/core @json-render/react-native
Not stated in the README：The README does not list the exact built-in component set of the React Native renderer.；The README does not describe iOS and Android differences, native modules, or navigation integration.
Yes I am building an MCP App for Claude, ChatGPT, Cursor, or VS Code. I want AI-generated interactive UI, but only with predefined components and actions. Is json-render suitable as a controlled UI layer?
For: An agent developer building MCP Apps for Claude, ChatGPT, Cursor, or VS Code who wants AI output to trigger only predefined actions

Yes. The project provides MCP Apps integration together with catalog and action constraints, making it suitable for limiting an agent’s UI output to predefined capabilities. However, the application still needs to validate permissions and parameters for every action.

  • @json-render/mcp explicitly supports MCP Apps integration for Claude, ChatGPT, Cursor, and VS Code.
  • The How It Works section requires developers to define the components, actions, and data bindings available to AI.
  • AI generates a JSON Spec, which the renderer maps to real components instead of executing arbitrary model-generated code.
  • The README describes the integration and UI constraints, but not MCP tool authorization, user identity, auditing, or action-failure recovery.
  • Packages: `@json-render/mcp` — MCP Apps integration for Claude, ChatGPT, Cursor, VS Code
  • How It Works: “Define the guardrails - what components, actions, and data bindings AI can use”
  • Why json-render?: “Predefined components and actions for safe, predictable output”
  • Project insight: the core architecture is “Catalog + JSON UI Spec + Renderer”
Not stated in the README：The README does not provide an installation command or minimal integration example for `@json-render/mcp`.；The README does not describe mapping, authorization, or auditing interfaces between MCP tool calls and json-render actions.；Project data shows the latest release is v0.21.0 with 5 releases, but the README does not state a stability commitment for the MCP integration.

✨ Highlights

  • catalog restricts AI to predefined components and actions
  • SpecStream supports progressive rendering during model responses
  • One catalog covers React, Vue, Svelte, and Solid
  • Includes 36 pre-built shadcn/ui components
  • Supports full Next.js apps and React Native mobile
  • The project has 17,311 stars and 919 forks

🔧 Engineering

  • Use defineCatalog to declare Card, Metric, Button, and export_report
  • Use React Renderer to safely render AI-generated JSON specs
  • The same catalog can output PDFs, emails, videos, and 3D scenes
  • MCP Apps integration covers Claude, ChatGPT, Cursor, and VS Code

⚠️ Risks

  • Jev composition is marked Experimental and unreleased, so it is not a stable capability
  • The project has only 10 contributors and 5 releases, indicating limited ecosystem maturity
  • The README does not specify model providers, authentication, or production security boundaries
  • JSON constraints depend on a custom catalog, while invalid-output handling is not shown

👥 For who?

  • Frontend teams using React that need controlled AI-generated dashboards
  • Teams that need one component catalog across React, Vue, Svelte, and Solid
  • Developers building dynamic Next.js apps with routes, SSR, and metadata
  • Teams needing React Native, Remotion, or React PDF outputs