Hello JSX

This card is written in JSX, compiled to service queries, and hydrated by the service locator.

{
  "type": "widget",
  "name": "card",
  "properties": {
    "style": {
      "flex": "1 1 320px",
      "maxWidth": "560px",
      "padding": "8px 32px 24px",
      "lineHeight": "1.55",
      "boxSizing": "border-box"
    },
    "children": [
      {
        "type": "htmlElement",
        "name": "h1",
        "properties": {
          "children": [
            "Hello JSX"
          ]
        }
      },
      {
        "type": "htmlElement",
        "name": "p",
        "properties": {
          "children": [
            "This card is written in ",
            {
              "type": "htmlElement",
              "name": "b",
              "properties": {
                "style": {
                  "color": "var(--cascade-accent, #2e86c1)"
                },
                "children": [
                  "JSX"
                ]
              }
            },
            ", compiled to service queries, and hydrated by the service locator."
          ]
        }
      },
      {
        "type": "htmlElement",
        "name": "div",
        "properties": {
          "style": {
            "display": "flex",
            "gap": "8px"
          },
          "children": [
            {
              "type": "widget",
              "name": "button",
              "properties": {
                "variant": "filled",
                "onClick": "ƒ callback",
                "children": [
                  "Count is 0"
                ]
              }
            },
            {
              "type": "widget",
              "name": "button",
              "properties": {
                "disabled": true,
                "onClick": "ƒ callback",
                "children": [
                  "Reset"
                ]
              }
            }
          ]
        }
      },
      {
        "type": "htmlElement",
        "name": "ul",
        "properties": {}
      }
    ]
  }
}