JSON becomes UI

Define a catalog. AI generates JSON. Your components render natively.

Try: "Create a login form" or "Build a feedback form with rating"

render

waiting...

Get Started GitHub

Define Catalog

Specify which components AI can use with Zod schemas. Full type safety and validation.

Register Components

Map catalog types to your React components. Use your own design system.

Let AI Generate

AI outputs JSON matching your schema. Stream it. Render progressively.

Define your catalog

Components, actions, and validation functions. All type-safe with Zod.

import { createCatalog } from '@json-render/core';
import { z } from 'zod';

export const catalog = createCatalog({
  components: {
    Card: {
      props: z.object({
        title: z.string(),
        description: z.string().nullable(),
      }),
      hasChildren: true,
    },
    Metric: {
      props: z.object({
        label: z.string(),
        valuePath: z.string(),
        format: z.enum(['currency', 'percent']),
      }),
    },
  },
  actions: {
    export: { params: z.object({ format: z.string() }) },
  },
});

AI generates JSON

Constrained output that your components render natively.

{
  "key": "dashboard",
  "type": "Card",
  "props": {
    "title": "Revenue Dashboard",
    "description": null
  },
  "children": [
    {
      "key": "revenue",
      "type": "Metric",
      "props": {
        "label": "Total Revenue",
        "valuePath": "/metrics/revenue",
        "format": "currency"
      }
    }
  ]
}

Features

Guardrails

AI can only use components you define in the catalog

Streaming

Progressive rendering as JSON streams from the model

Data Binding

Two-way binding with JSON Pointer paths

Actions

Named actions handled by your application

Visibility

Conditional show/hide based on data or auth

Validation

Built-in and custom validation functions

Get started

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

Documentation