json-render — Generative UI Framework by Vercel

Introduction

json-render is an open-source framework from Vercel Labs that bridges AI-generated structured data and rendered UI components. Instead of generating raw HTML or markdown, an LLM outputs a JSON schema that json-render maps to React components. This approach provides type safety, consistent styling, and interactive elements that raw text output cannot achieve.

What json-render Does

• Maps JSON schemas to pre-defined React component trees
• Provides a registry of built-in UI primitives (cards, tables, charts, forms)
• Validates LLM output against component schemas before rendering
• Supports custom component registration for domain-specific UIs
• Handles streaming JSON from LLM responses with progressive rendering

Architecture Overview

json-render uses a component registry pattern where each JSON type maps to a React component. When the framework receives a JSON tree, it walks the structure and instantiates the corresponding components with their props. A validation layer catches malformed or unsupported schemas before rendering, preventing broken UI from reaching the user.

Self-Hosting & Configuration

• Install via npm and import into any React project
• Register custom components by mapping type strings to React components
• Configure fallback components for unknown types
• Use the built-in theme system or apply your own CSS
• Deploy as part of any Next.js, Vite, or Create React App project

Key Features

• Streaming-compatible for real-time LLM output rendering
• Type-safe component props validated at runtime
• Built-in primitives covering common UI patterns
• Composable schemas supporting nested component trees
• Framework-agnostic JSON format usable with any LLM provider

Comparison with Similar Tools

• Vercel AI SDK — Handles LLM communication; json-render focuses on rendering structured output
• Streamlit — Python-based app builder; json-render is a React component library
• Gradio — ML demo builder; json-render is a general-purpose generative UI toolkit
• Sandpack — Live code editor component; json-render renders declarative UI schemas

FAQ

Q: Which LLMs work with json-render? A: Any LLM that can output structured JSON. Works well with function calling and structured output modes from OpenAI, Anthropic, and others.

Q: Can I use custom components? A: Yes. Register any React component with a type name and props schema in the component registry.

Q: Does it work with server-side rendering? A: Yes. json-render supports SSR in Next.js and other React server frameworks.

Q: Is there a non-React version? A: Currently React-only. The JSON schema format is framework-agnostic and could be rendered by other implementations.

Sources

• https://github.com/vercel-labs/json-render