A simple representation of DOM elements in JSON format.

jdom-data-structure.js

// An image
{
    "type": "img",
    "attrs": {
        "src": "helloworld.jpg",
        "height": 200,
        "width": 200
    }
}

// A div with children
{
    "type": "div",
    "attrs": {
        "id": "my-div"
    },
    "contents": [
        {
            "type": "em",
            "text": "This is important!"
        }
    ]
}

// or also..
{
    "type": "div",
    "attrs": {
        "id": "my-div"
    },
    "html": "<em>This is important!</em>"
}

// And where it really shines
{
    "type": "Form", // a custom type, Form is the Class name.
    "attrs": {
        "id": "my-form"
    },
    "options": { // options consumed by the custom Form Class
        "validate": true,
        "post-to": "/contact/",
        "redirect-to": "/thankyou/"
    },
    "contents": [
        {   
            "type": "input",
            "attrs": {
                "type": "text",
                "name": "name",
                "placeholder": "Your name"
            },
            "options": { // options property to provides additional data.
                "label": "Your Name"
            }            
        },
        {   
            "type": "input",
            "attrs": {
                "type": "email",
                "name": "email",
                "placeholder": "Your e-mail"
            },
            "options": { // Options property to provide additional data.
                "label": "Your e-mail"
            }            
        },
        {   
            "type": "textarea",
            "attrs": {
                "name": "message",
                "placeholder": "Your thoughts"
            }
        }
    ]
}