DOM from JSON (and back)

Have fun modifying the JSON to generate your own DOM elements.

The above form was generated on-the-fly and injected into the main element using the following JSON:


				{
  "tagName": "FORM",
  "attributes": {
    "action": "#",
    "name": "form",
    "method": "POST"
  },
  "events": {
    "focusin": "log",
    "submit": "parse-submission"
  },
  "children": [
    {
      "tagName": "TEXTAREA",
      "attributes": {
        "data-type": "json",
        "name": "json"
      },
      "children": ["see below"]
    },
    {
      "tagName": "BUTTON",
      "attributes": {
        "aria-label": "Run this baby",
        "type": "submit"
      },
      "children": [
        "Run"
      ]
    }
  ]
}

If you want to prefill the textarea as above, use JSON.stringify on the code below and replace "see below" with the resulting string.


				{
  "tagName": "DIV",
  "attributes": {
    "class": "sb-test",
    "data-type": "string",
    "id": "sb-test-id"
  },
  "events": {
    "click": "log"
  },
  "children": [
    {
      "tagName": "STRONG",
      "children": [
        "Bob's yer uncle."
      ]
    }
  ]
}

You can try the following example. Note that the toggleVisibility function is already a available module. If you want to try something else, use the log module, e.g., "events": { "click": "log" }. Don't forget to escape the quotation marks (\").


				{
  "tagName": "DIV",
  "attributes": {
    "class": "form-field"
  },
  "events": {
    "click": "log"
  },
  "children": [
    {
      "tagName": "INPUT",
      "attributes": {
        "type": "password"
      }
    },
    {
      "tagName": "BUTTON",
      "attributes": {
        "aria-label": "Show password.",
        "class": "xx-toggle-password",
        "type": "button"
      },
      "events": {
        "click": "toggle-visibility"
      },
      "children": ["show"]
    }
  ]
}