{
  "nodes": [
    {
      "tagName": "div",
      "attributes": {
        "class": "flex gap-2 items-center",
        "formdataprovider": "states-basic-example"
      },
      "nodes": [
        {
          "tagName": "sonic-button",
          "attributes": {
            "radio": "",
            "name": "selection",
            "value": "#home",
            "checked": "",
            "size": "xs"
          },
          "innerHTML": "Home"
        },
        {
          "tagName": "sonic-button",
          "attributes": {
            "radio": "",
            "name": "selection",
            "value": "#about",
            "size": "xs"
          },
          "innerHTML": "About"
        },
        {
          "tagName": "sonic-button",
          "attributes": {
            "radio": "",
            "name": "selection",
            "value": "#work",
            "size": "xs"
          },
          "innerHTML": "Work"
        },
        {
          "tagName": "sonic-button",
          "attributes": {
            "radio": "",
            "name": "selection",
            "value": "#contact",
            "size": "xs"
          },
          "innerHTML": "Contact"
        }
      ]
    },
    {
      "tagName": "div",
      "attributes": {
        "class": "text-center text-neutral-700 border rounded text-4xl  my-6 p-3 "
      },
      "nodes": [
        {
          "tagName": "sonic-states",
          "attributes": {
            "dataprovider": "states-basic-example",
            "data-path": "selection"
          },
          "nodes": [
            {
              "tagName": "template",
              "attributes": {
                "data-value": "#home"
              },
              "innerHTML": "Home"
            },
            {
              "tagName": "template",
              "attributes": {
                "data-value": "#about"
              },
              "innerHTML": "About"
            },
            {
              "tagName": "template",
              "attributes": {
                "data-value": "#work"
              },
              "innerHTML": "Work"
            },
            {
              "tagName": "template",
              "attributes": {
                "data-value": "#contact"
              },
              "innerHTML": "Contact"
            }
          ]
        }
      ]
    }
  ]
}