# json-render — Generative UI Framework by Vercel

> A framework for building dynamic, AI-generated user interfaces by rendering structured JSON into React components at runtime.

## Install

Save as a script file and run:

# json-render — Generative UI Framework by Vercel

## Quick Use
```bash
npm install @vercel/json-render
```

```tsx
import { JsonRender } from '@vercel/json-render';

const ui = {
  type: 'card',
  children: [
    { type: 'heading', text: 'Hello World' },
    { type: 'paragraph', text: 'Generated dynamically' }
  ]
};

export default function App() {
  return <JsonRender schema={ui} />;
}
```

## 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

---
Source: https://tokrepo.com/en/workflows/asset-3909bb96
Author: Script Depot