AI Interface Builder

Describe the interface you want — an AI turns it into a JSON spec and renders it live. Or paste a json-render spec yourself.

AI Generate (describe the interface)

JSON Spec (editable — live preview on the right)

{
  "root": "frame-1",
  "elements": {
    "frame-1": {
      "type": "Frame",
      "props": {
        "gap": 24,
        "padding": "p-8",
        "bg": "bg-neutral-50 dark:bg-neutral-900"
      },
      "children": [
        "card-1"
      ]
    },
    "card-1": {
      "type": "Card",
      "props": {
        "title": "Welcome to JSON UI",
        "subtitle": "Paste a spec on the left, or let AI generate one.",
        "shadow": true
      },
      "children": [
        "row-1",
        "button-1"
      ]
    },
    "row-1": {
      "type": "Row",
      "props": {
        "gap": 12,
        "align": "center"
      },
      "children": [
        "badge-1",
        "text-1"
      ]
    },
    "badge-1": {
      "type": "Badge",
      "props": {
        "text": "json-render",
        "color": "purple"
      },
      "children": []
    },
    "text-1": {
      "type": "Text",
      "props": {
        "text": "Live preview — edits render instantly.",
        "variant": "small",
        "color": "text-neutral-500"
      },
      "children": []
    },
    "button-1": {
      "type": "Button",
      "props": {
        "label": "Generate with AI",
        "variant": "primary"
      },
      "children": []
    }
  }
}

Live preview

Welcome to JSON UI

Paste a spec on the left, or let AI generate one.

json-render

Live preview — edits render instantly.