Stop Letting AI Write Your HTML - Use JSON Instead

You ask ChatGPT to "build me a dashboard." You get a wall of raw HTML with inline styles, broken accessibility, hardcoded data, and zero connection to your design system. You paste it into your app, and half of it doesn't even render.

Now imagine the AI could only output a structured JSON spec - and that spec could only reference components from your own component library. No rogue <div> soup. No inline CSS. No XSS vectors. Just clean, validated, renderable UI.

That's exactly what json-render does.

What is json-render?

json-render is a Generative UI framework from Vercel Labs. It bridges the gap between AI language models and real UI components with a simple idea:

1. You define a catalog - a whitelist of components (Card, Button, Table, Input, etc.) with typed props.
2. AI generates a JSON spec - a flat, referential structure that describes which components to render and how to wire them together.
3. The renderer paints real UI - using your actual component implementations (React, Vue, Svelte, React Native, even PDF).

The AI can only use components from your catalog. No surprises, no raw HTML, no unsafe output. Guardrailed by design.

The Problem It Solves

When you let AI generate raw HTML or JSX, you get:

• Unpredictable output - Every response looks different. No consistency with your design system.
• Security risks - Raw HTML means potential XSS injection. You need to sanitize everything.
• No type safety - The AI can invent any component name or prop. Nothing validates the output before rendering.
• Platform lock-in - HTML output only works on the web. What about mobile? PDF? Email?

json-render eliminates all of these by constraining AI to a predefined schema. The JSON spec acts as a contract between the AI and your renderer.

How It Works

User Prompt
    ↓
AI Model (Claude, GPT, etc.)
    ↓
JSON Spec  ←── constrained by Catalog
    ↓
Renderer   ←── maps to real components
    ↓
Real UI (React, Vue, Native, PDF...)

Three concepts to understand:

1. Catalog - Defines available components and their prop schemas using Zod. This is what you give the AI as its "component menu."
2. Registry - Maps catalog entries to real component implementations (React components, native views, etc.).
3. Spec - The JSON structure the AI generates. A flat map of element IDs, each with a type, props, and children references.

Getting Started

# Core + React renderer
npm install @json-render/core @json-render/react

# Pre-built shadcn/ui components (36 components ready to go)
npm install @json-render/shadcn

Basic Usage

Here's the minimal setup with pre-built shadcn components:

import { defineCatalog } from "@json-render/core";
import { schema } from "@json-render/react/schema";
import { defineRegistry, Renderer } from "@json-render/react";
import { shadcnComponents } from "@json-render/shadcn";
import { shadcnComponentDefinitions } from "@json-render/shadcn/catalog";

// 1. Define your catalog (what AI can use)
const catalog = defineCatalog(schema, {
  components: {
    Card: shadcnComponentDefinitions.Card,
    Button: shadcnComponentDefinitions.Button,
    Heading: shadcnComponentDefinitions.Heading,
    Text: shadcnComponentDefinitions.Text,
    Stack: shadcnComponentDefinitions.Stack,
  },
  actions: {},
});

// 2. Create registry (real implementations)
const { registry } = defineRegistry(catalog, {
  components: {
    Card: shadcnComponents.Card,
    Button: shadcnComponents.Button,
    Heading: shadcnComponents.Heading,
    Text: shadcnComponents.Text,
    Stack: shadcnComponents.Stack,
  },
});

// 3. Render a spec
function MyUI({ spec }) {
  return <Renderer spec={spec} registry={registry} />;
}

And here's what a JSON spec looks like:

{
  "root": "card-1",
  "elements": {
    "card-1": {
      "type": "Card",
      "props": { "title": "Welcome" },
      "children": ["text-1", "button-1"]
    },
    "text-1": {
      "type": "Text",
      "props": { "text": "Hello from AI-generated UI!" },
      "children": []
    },
    "button-1": {
      "type": "Button",
      "props": { "label": "Get Started" },
      "children": []
    }
  }
}

Try It Yourself

Edit the JSON on the left and watch the UI update in real-time on the right. Use the preset buttons to load different examples.

Why This Matters

1. Cross-Platform from Day One

The same JSON spec renders on React, Vue, Svelte, React Native, as a PDF, or even in an email. Write your AI logic once, render everywhere.

2. 36 Pre-Built Components

The @json-render/shadcn package ships 36 production components - Card, Table, Form inputs, Dialog, Tabs, Accordion, and more. You can start building immediately without writing any component implementations.

3. State & Expressions

json-render supports built-in state management with $state, conditional rendering with $cond, and dynamic expressions. Your AI-generated UIs can be interactive, not just static.

4. Progressive Rendering (Streaming)

The renderer supports streaming - as the AI generates the JSON spec token by token, the UI renders incrementally. Users see UI building up in real-time, not a loading spinner followed by a flash.

5. Safety by Default

No raw HTML injection. No arbitrary component creation. The catalog acts as a strict whitelist. If the AI tries to reference a component that doesn't exist in your catalog, it simply doesn't render. No XSS, no surprises.

Practical Use Cases

• AI Chatbots with Rich Responses - Instead of just text, your chatbot renders cards, tables, forms, and interactive elements.
• Dynamic Dashboards - Users describe what they want to see, AI generates the dashboard layout from your component library.
• Form Builders - AI generates validated, styled forms from natural language descriptions.
• Report Generation - Same spec renders as a web dashboard and a downloadable PDF.
• Email Templates - AI generates email layouts using your brand components via @json-render/react-email.

Get Started

json-render is open source, from Vercel Labs, and ready to use today. If you're building anything where AI generates UI - chatbots, dashboards, form builders, report generators - this is the framework to reach for.

GitHub Repository · npm install @json-render/core @json-render/react @json-render/shadcn