low-code-react-app-b/src/config/json-demo.json

{
  "copy": {
    "toastAdded": "Todo added!",
    "toastDeleted": "Todo deleted",
    "deleteButtonLabel": "×"
  },
  "initialTodos": [
    { "id": 1, "text": "Design JSON schema", "completed": true },
    { "id": 2, "text": "Build atomic components", "completed": false },
    { "id": 3, "text": "Create custom hooks", "completed": false }
  ],
  "schema": {
    "id": "json-demo-page",
    "type": "div",
    "className": "h-full overflow-auto p-6",
    "children": [
      {
        "id": "header",
        "type": "div",
        "className": "mb-6",
        "children": [
          {
            "id": "title",
            "type": "h1",
            "className": "text-3xl font-bold mb-2",
            "children": "JSON-Driven UI Demo"
          },
          {
            "id": "description",
            "type": "p",
            "className": "text-muted-foreground",
            "children": "This entire page is built from a JSON schema - no JSX required!"
          }
        ]
      },
      {
        "id": "main-card",
        "type": "Card",
        "className": "max-w-2xl",
        "children": [
          {
            "id": "card-header",
            "type": "CardHeader",
            "children": [
              {
                "id": "card-title",
                "type": "CardTitle",
                "children": "Todo List"
              },
              {
                "id": "card-description",
                "type": "CardDescription",
                "children": "Manage your tasks with JSON-powered UI"
              }
            ]
          },
          {
            "id": "card-content",
            "type": "CardContent",
            "className": "space-y-4",
            "children": [
              {
                "id": "input-group",
                "type": "div",
                "className": "flex gap-2",
                "children": [
                  {
                    "id": "todo-input",
                    "type": "Input",
                    "props": {
                      "placeholder": "Enter a new todo...",
                      "value": ""
                    },
                    "events": {
                      "onChange": { "action": "update-input" }
                    }
                  },
                  {
                    "id": "add-button",
                    "type": "Button",
                    "props": {
                      "children": "Add"
                    },
                    "events": {
                      "onClick": { "action": "add-todo" }
                    }
                  }
                ]
              },
              {
                "id": "todo-list",
                "type": "div",
                "className": "space-y-2",
                "children": []
              }
            ]
          }
        ]
      }
    ]
  }
}