json-render

The Generative UI Framework

AI → json-render → UI

Generate dynamic, personalized UIs from prompts without sacrificing reliability. Predefined components and actions for safe, predictable output.

waiting...
npm install @json-render/core @json-render/react
Get StartedGitHub
01

Define Your Catalog

Set the guardrails. Define which components, actions, and data bindings AI can use.

02

AI Generates

Describe what you want. AI generates JSON constrained to your catalog. Every interface is unique.

03

Render Instantly

Stream the response. Your components render progressively as JSON arrives.

Define your catalog

Components, actions, and validation functions.

import { defineSchema, defineCatalog } from '@json-render/core';
import { z } from 'zod';

const schema = defineSchema({ /* ... */ });

export const catalog = defineCatalog(schema, {
  components: {
    Card: {
      props: z.object({
        title: z.string(),
        description: z.string().nullable(),
      }),
      hasChildren: true,
    },
    Metric: {
      props: z.object({
        label: z.string(),
        statePath: 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.

{
  "root": "dashboard",
  "elements": {
    "dashboard": {
      "type": "Card",
      "props": {
        "title": "Revenue Dashboard"
      },
      "children": ["revenue"]
    },
    "revenue": {
      "type": "Metric",
      "props": {
        "label": "Total Revenue",
        "statePath": "/metrics/revenue",
        "format": "currency"
      }
    }
  }
}

Export as Code

Export generated UI as standalone React components. No runtime dependencies required.

Generated UI Tree

AI generates a JSON structure from the user's prompt.

{
  "root": "card",
  "elements": {
    "card": {
      "type": "Card",
      "props": { "title": "Revenue" },
      "children": ["metric", "chart"]
    },
    "metric": {
      "type": "Metric",
      "props": {
        "label": "Total Revenue",
        "statePath": "analytics/revenue",
        "format": "currency"
      }
    },
    "chart": {
      "type": "Chart",
      "props": {
        "statePath": "analytics/salesByRegion"
      }
    }
  }
}

Exported React Code

Export as a standalone Next.js project with all components.

"use client";

import { Card, Metric, Chart } from "@/components/ui";

const data = {
  analytics: {
    revenue: 125000,
    salesByRegion: [
      { label: "US", value: 45000 },
      { label: "EU", value: 35000 },
    ],
  },
};

export default function Page() {
  return (
    <Card data={data} title="Revenue">
      <Metric
        data={data}
        label="Total Revenue"
        statePath="analytics/revenue"
        format="currency"
      />
      <Chart data={data} statePath="analytics/salesByRegion" />
    </Card>
  );
}

The export includes package.json, component files, styles, and everything needed to run independently.

Features

Generative UI

Generate dynamic, personalized interfaces from prompts with AI

Guardrails

AI can only use components you define in the catalog

Streaming

Progressive rendering as JSON streams from the model

React & React Native

Render on web and mobile from the same catalog and spec format

Data Binding

Connect props to state with $state, $item, $index, and two-way binding

Code Export

Export as standalone React code with no runtime dependencies

Get started

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