Playground

Edit a JSON spec and preview it across renderers — Web, PDF, and AI.

Spec

{
  "root": "stack-18",
  "elements": {
    "metric-1": {
      "type": "Metric",
      "props": {
        "label": "Revenue",
        "value": "$48,352",
        "change": "+12.5%",
        "trend": "up"
      }
    },
    "metric-2": {
      "type": "Metric",
      "props": {
        "label": "Users",
        "value": "2,847",
        "change": "+8.2%",
        "trend": "up"
      }
    },
    "metric-3": {
      "type": "Metric",
      "props": {
        "label": "Conversion",
        "value": "3.6%",
        "change": "-0.4%",
        "trend": "down"
      }
    },
    "metric-4": {
      "type": "Metric",
      "props": {
        "label": "Avg. Order",
        "value": "$64.20",
        "change": "0%",
        "trend": "flat"
      }
    },
    "grid-5": {
      "type": "Grid",
      "props": {
        "columns": 4,
        "gap": "md"
      },
      "children": [
        "metric-1",
        "metric-2",
        "metric-3",
        "metric-4"
      ]
    },
    "table-6": {
      "type": "Table",
      "props": {
        "title": "Recent Orders",
        "columns": [
          {
            "id": "id",
            "header": "Order ID",
            "accessorKey": "id"
          },
          {
            "id": "customer",
            "header": "Customer",
            "accessorKey": "customer"
          },
          {
            "id": "amount",
            "header": "Amount",
            "accessorKey": "amount"
          },
          {
            "id": "status",
            "header": "Status",
            "accessorKey": "status"
          },
          {
            "id": "date",
            "header": "Date",
            "accessorKey": "date"
          }
        ],
        "rows": [
          {
            "id": "ORD-001",
            "customer": "Alice Johnson",
            "amount": "$120.00",
            "status": "Completed",
            "date": "2026-03-25"
          },
          {
            "id": "ORD-002",
            "customer": "Bob Smith",
            "amount": "$85.50",
            "status": "Processing",
            "date": "2026-03-25"
          },
          {
            "id": "ORD-003",
            "customer": "Carol Williams",
            "amount": "$210.00",
            "status": "Completed",
            "date": "2026-03-24"
          },
          {
            "id": "ORD-004",
            "customer": "David Brown",
            "amount": "$45.00",
            "status": "Pending",
            "date": "2026-03-24"
          },
          {
            "id": "ORD-005",
            "customer": "Eva Martinez",
            "amount": "$167.25",
            "status": "Completed",
            "date": "2026-03-23"
          }
        ]
      }
    },
    "tabpanel-7": {
      "type": "TabPanel",
      "props": {
        "value": "overview"
      },
      "children": [
        "table-6"
      ]
    },
    "keyvalue-8": {
      "type": "KeyValue",
      "props": {
        "label": "Total Revenue (MTD)",
        "value": "$48,352"
      }
    },
    "keyvalue-9": {
      "type": "KeyValue",
      "props": {
        "label": "Active Users",
        "value": "2,847"
      }
    },
    "keyvalue-10": {
      "type": "KeyValue",
      "props": {
        "label": "New Signups (week)",
        "value": "142"
      }
    },
    "keyvalue-11": {
      "type": "KeyValue",
      "props": {
        "label": "Churn Rate",
        "value": "2.1%"
      }
    },
    "keyvalue-12": {
      "type": "KeyValue",
      "props": {
        "label": "Support Tickets",
        "value": "23"
      }
    },
    "stack-13": {
      "type": "Stack",
      "props": {
        "direction": "vertical",
        "gap": "xs"
      },
      "children": [
        "keyvalue-8",
        "keyvalue-9",
        "keyvalue-10",
        "keyvalue-11",
        "keyvalue-12"
      ]
    },
    "card-14": {
      "type": "Card",
      "props": {
        "title": "Key Metrics"
      },
      "children": [
        "stack-13"
      ]
    },
    "tabpanel-15": {
      "type": "TabPanel",
      "props": {
        "value": "details"
      },
      "children": [
        "card-14"
      ]
    },
    "tabs-16": {
      "type": "Tabs",
      "props": {
        "tabs": [
          {
            "value": "overview",
            "label": "Overview"
          },
          {
            "value": "details",
            "label": "Details"
          }
        ],
        "variant": "line"
      },
      "children": [
        "tabpanel-7",
        "tabpanel-15"
      ]
    },
    "heading-17": {
      "type": "Heading",
      "props": {
        "text": "Sales Dashboard",
        "level": "1"
      }
    },
    "stack-18": {
      "type": "Stack",
      "props": {
        "direction": "vertical",
        "gap": "lg"
      },
      "children": [
        "heading-17",
        "grid-5",
        "tabs-16"
      ]
    }
  },
  "state": {}
}

Sales Dashboard

Revenue

$48,352

+12.5%

Users

2,847

+8.2%

Conversion

3.6%

-0.4%

Avg. Order

$64.20

Recent Orders

Order ID	Customer	Amount	Status	Date
ORD-001	Alice Johnson	$120.00	Completed	2026-03-25
ORD-002	Bob Smith	$85.50	Processing	2026-03-25
ORD-003	Carol Williams	$210.00	Completed	2026-03-24
ORD-004	David Brown	$45.00	Pending	2026-03-24
ORD-005	Eva Martinez	$167.25	Completed	2026-03-23

Search docs

Playground

Sales Dashboard

Recent Orders