JSON-render: LLM-based JSON-to-UI tool

Source: json-render.dev

54 points by rickcarlino 5 hours ago on hackernews | 11 comments

Define a component catalog. Users prompt. AI outputs JSON constrained to your catalog. Your components render it.

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

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

Define Your Catalog

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

Users Prompt

End users describe what they want. AI generates JSON constrained to your catalog.

Render Instantly

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

Define your catalog

Components, actions, and validation functions.

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"
      }
    }
  ]
}

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": {
      "key": "card",
      "type": "Card",
      "props": { "title": "Revenue" },
      "children": ["metric", "chart"]
    },
    "metric": {
      "key": "metric",
      "type": "Metric",
      "props": {
        "label": "Total Revenue",
        "valuePath": "analytics/revenue",
        "format": "currency"
      }
    },
    "chart": {
      "key": "chart",
      "type": "Chart",
      "props": {
        "dataPath": "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"
        valuePath="analytics/revenue"
        format="currency"
      />
      <Chart data={data} dataPath="analytics/salesByRegion" />
    </Card>
  );
}

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

Features

Guardrails

AI can only use components you define in the catalog

Streaming

Progressive rendering as JSON streams from the model

Code Export

Export as standalone React code with no runtime dependencies

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

Get started

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