{
    "contentType": "element",
    "tagName": "div",
    "children": [
        {
            "contentType": "element",
            "tagName": "nav",
            "children": [
                {
                    "contentType": "element",
                    "tagName": "h1",
                    "children": [
                        {
                            "contentType": "text",
                            "tagText": "JSON-2-HTML"
                        }
                    ],
                    "attributes": [
                        {
                            "attributeName": "componentid",
                            "attributeValue": "0"
                        },
                        {
                            "attributeName": "style",
                            "attributeValue": "color: #f0f0f0;"
                        }
                    ],
                    "componentID": 0
                },
                {
                    "contentType": "element",
                    "tagName": "ul",
                    "children": [
                        {
                            "contentType": "element",
                            "tagName": "li",
                            "children": [
                                {
                                    "contentType": "element",
                                    "tagName": "a",
                                    "children": [
                                        {
                                            "contentType": "text",
                                            "tagText": "Home"
                                        }
                                    ],
                                    "attributes": [
                                        {
                                            "attributeName": "href",
                                            "attributeValue": "#landing"
                                        },
                                        {
                                            "attributeName": "contenteditable",
                                            "attributeValue": true
                                        },
                                        {
                                            "attributeName": "style",
                                            "attributeValue": "\n                    text-decoration: none;\n                    color: inherit;\n                    padding: 10px;\n                    display: block;\n                    text-transform: capitalize;\n                  "
                                        }
                                    ],
                                    "componentID": 1
                                }
                            ],
                            "componentID": 2
                        },
                        {
                            "contentType": "element",
                            "tagName": "li",
                            "children": [
                                {
                                    "contentType": "element",
                                    "tagName": "a",
                                    "children": [
                                        {
                                            "contentType": "text",
                                            "tagText": "Features"
                                        }
                                    ],
                                    "attributes": [
                                        {
                                            "attributeName": "href",
                                            "attributeValue": "#about"
                                        },
                                        {
                                            "attributeName": "contenteditable",
                                            "attributeValue": true
                                        },
                                        {
                                            "attributeName": "style",
                                            "attributeValue": "\n                    text-decoration: none;\n                    color: inherit;\n                    padding: 10px;\n                    display: block;\n                    text-transform: capitalize;\n                  "
                                        }
                                    ],
                                    "componentID": 3
                                }
                            ],
                            "componentID": 4
                        },
                        {
                            "contentType": "element",
                            "tagName": "li",
                            "children": [
                                {
                                    "contentType": "element",
                                    "tagName": "a",
                                    "children": [
                                        {
                                            "contentType": "text",
                                            "tagText": "Try-It-Out"
                                        }
                                    ],
                                    "attributes": [
                                        {
                                            "attributeName": "href",
                                            "attributeValue": "#projects"
                                        },
                                        {
                                            "attributeName": "contenteditable",
                                            "attributeValue": true
                                        },
                                        {
                                            "attributeName": "style",
                                            "attributeValue": "\n                    text-decoration: none;\n                    color: inherit;\n                    padding: 10px;\n                    display: block;\n                    text-transform: capitalize;\n                  "
                                        }
                                    ],
                                    "componentID": 5
                                }
                            ],
                            "componentID": 6
                        },
                        {
                            "contentType": "element",
                            "tagName": "li",
                            "children": [],
                            "componentID": 8
                        },
                        {
                            "contentType": "element",
                            "tagName": "li",
                            "children": [],
                            "componentID": 10
                        },
                        {
                            "contentType": "element",
                            "tagName": "li",
                            "children": [],
                            "componentID": 12
                        }
                    ],
                    "attributes": [
                        {
                            "attributeName": "style",
                            "attributeValue": "\n                display: flex;\n                list-style-type: none;\n              "
                        }
                    ],
                    "componentID": 13
                }
            ],
            "attributes": [
                {
                    "attributeName": "componentid",
                    "attributeValue": "14"
                },
                {
                    "attributeName": "style",
                    "attributeValue": "position: sticky; top: 0px; left: 0px; right: 0px; display: flex; justify-content: space-between; align-items: center; background-color: #6495ed; padding: 1rem 3rem; box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; color: #f0f0f0; z-index: 20"
                }
            ],
            "componentID": 14
        },
        {
            "contentType": "element",
            "tagName": "main",
            "children": [
                {
                    "contentType": "element",
                    "tagName": "section",
                    "children": [
                        {
                            "contentType": "element",
                            "tagName": "section",
                            "children": [
                                {
                                    "contentType": "element",
                                    "tagName": "div",
                                    "children": [
                                        {
                                            "contentType": "element",
                                            "tagName": "img",
                                            "children": [],
                                            "attributes": [
                                                {
                                                    "attributeName": "componentid",
                                                    "attributeValue": "41"
                                                },
                                                {
                                                    "attributeName": "src",
                                                    "attributeValue": "https://picsum.photos/800?random=1"
                                                },
                                                {
                                                    "attributeName": "alt",
                                                    "attributeValue": "Landing Page"
                                                },
                                                {
                                                    "attributeName": "style",
                                                    "attributeValue": "width: 100%; height: 100%; object-fit: cover; object-position: center center;"
                                                }
                                            ],
                                            "componentID": "41"
                                        }
                                    ],
                                    "attributes": [
                                        {
                                            "attributeName": "componentid",
                                            "attributeValue": "38"
                                        },
                                        {
                                            "attributeName": "style",
                                            "attributeValue": "text-align: center; padding: 10px; background-color: #333333; color: #333333; width: calc(70%); height: 70vh;"
                                        }
                                    ],
                                    "componentID": "38"
                                },
                                {
                                    "contentType": "element",
                                    "tagName": "div",
                                    "children": [
                                        {
                                            "contentType": "element",
                                            "tagName": "h1",
                                            "children": [
                                                {
                                                    "contentType": "text",
                                                    "tagText": "JSON"
                                                }
                                            ],
                                            "attributes": [
                                                {
                                                    "attributeName": "componentid",
                                                    "attributeValue": "42"
                                                },
                                                {
                                                    "attributeName": "style",
                                                    "attributeValue": "padding: 10px 10px 0px; color: #f0f0f0; font-size: 3rem; text-align: center;"
                                                }
                                            ],
                                            "componentID": "42"
                                        },
                                        {
                                            "contentType": "element",
                                            "tagName": "h1",
                                            "children": [
                                                {
                                                    "contentType": "text",
                                                    "tagText": "-2-"
                                                }
                                            ],
                                            "attributes": [
                                                {
                                                    "attributeName": "componentid",
                                                    "attributeValue": "81"
                                                },
                                                {
                                                    "attributeName": "style",
                                                    "attributeValue": "text-align: center; padding: 0px 10px; color: #f0f0f0; font-size: 3rem;"
                                                }
                                            ],
                                            "componentID": "81"
                                        },
                                        {
                                            "contentType": "element",
                                            "tagName": "h1",
                                            "children": [
                                                {
                                                    "contentType": "text",
                                                    "tagText": "HTML"
                                                }
                                            ],
                                            "attributes": [
                                                {
                                                    "attributeName": "componentid",
                                                    "attributeValue": "82"
                                                },
                                                {
                                                    "attributeName": "style",
                                                    "attributeValue": "text-align: center; padding: 0px 10px 10px; color: #f0f0f0; font-size: 3rem;"
                                                }
                                            ],
                                            "componentID": "82"
                                        },
                                        {
                                            "contentType": "element",
                                            "tagName": "p",
                                            "children": [
                                                {
                                                    "contentType": "text",
                                                    "tagText": "A simple and lightweight CMS built with 0 dependencies. The entire page was built with VanillaJS"
                                                }
                                            ],
                                            "attributes": [
                                                {
                                                    "attributeName": "componentid",
                                                    "attributeValue": "83"
                                                },
                                                {
                                                    "attributeName": "style",
                                                    "attributeValue": "text-align: center; padding: 10px; color: #f0f0f0; font-weight: 100;"
                                                }
                                            ],
                                            "componentID": "83"
                                        }
                                    ],
                                    "attributes": [
                                        {
                                            "attributeName": "componentid",
                                            "attributeValue": "39"
                                        },
                                        {
                                            "attributeName": "style",
                                            "attributeValue": "text-align: center; padding: 10px; background-color: #333333; color: #333333; width: calc(30%); display: flex; flex-direction: column; align-items: center; justify-content: center;"
                                        }
                                    ],
                                    "componentID": "39"
                                }
                            ],
                            "attributes": [
                                {
                                    "attributeName": "componentid",
                                    "attributeValue": "40"
                                },
                                {
                                    "attributeName": "style",
                                    "attributeValue": "width: 100%; text-align: center; display: flex; flex-direction: row; gap: 10px; justify-content: space-between"
                                }
                            ],
                            "componentID": "40"
                        }
                    ],
                    "attributes": [
                        {
                            "attributeName": "componentid",
                            "attributeValue": "17"
                        },
                        {
                            "attributeName": "id",
                            "attributeValue": "landing"
                        },
                        {
                            "attributeName": "style",
                            "attributeValue": "min-height: 100vh; padding: 0% 10%; display: flex; flex-direction: column; justify-content: center; align-items: center; color: #6495ed; background-color: #333333;"
                        }
                    ],
                    "componentID": 17
                },
                {
                    "contentType": "element",
                    "tagName": "section",
                    "children": [
                        {
                            "contentType": "element",
                            "tagName": "h2",
                            "children": [
                                {
                                    "contentType": "text",
                                    "tagText": "Features"
                                }
                            ],
                            "attributes": [
                                {
                                    "attributeName": "componentid",
                                    "attributeValue": "67"
                                },
                                {
                                    "attributeName": "style",
                                    "attributeValue": "text-align: center; padding: 10px; text-transform: uppercase; font-size: 3rem; color: #f0f0f0; margin-bottom: 30px;"
                                }
                            ],
                            "componentID": "67"
                        },
                        {
                            "contentType": "element",
                            "tagName": "section",
                            "children": [
                                {
                                    "contentType": "element",
                                    "tagName": "div",
                                    "children": [
                                        {
                                            "contentType": "element",
                                            "tagName": "h4",
                                            "children": [
                                                {
                                                    "contentType": "text",
                                                    "tagText": "Lightweight"
                                                }
                                            ],
                                            "attributes": [
                                                {
                                                    "attributeName": "componentid",
                                                    "attributeValue": "72"
                                                },
                                                {
                                                    "attributeName": "style",
                                                    "attributeValue": "text-align: center; padding: 10px; color: #f0f0f0; font-size: 1.5rem; text-transform: uppercase;"
                                                }
                                            ],
                                            "componentID": "72"
                                        },
                                        {
                                            "contentType": "element",
                                            "tagName": "p",
                                            "children": [
                                                {
                                                    "contentType": "text",
                                                    "tagText": "No framework, no dependencies. This entire project was built with vanilla HTML, CSS and JS. With no dependencies, this will ensure that this project is fast on every device!"
                                                }
                                            ],
                                            "attributes": [
                                                {
                                                    "attributeName": "componentid",
                                                    "attributeValue": "73"
                                                },
                                                {
                                                    "attributeName": "style",
                                                    "attributeValue": "text-align: center; padding: 10px; color: #f0f0f0; font-weight: 200;"
                                                }
                                            ],
                                            "componentID": "73"
                                        }
                                    ],
                                    "attributes": [
                                        {
                                            "attributeName": "componentid",
                                            "attributeValue": "68"
                                        },
                                        {
                                            "attributeName": "style",
                                            "attributeValue": "text-align: center; padding: 10px; background-color: #6495ec; color: #333333; width: calc(33.3333%);"
                                        }
                                    ],
                                    "componentID": "68"
                                },
                                {
                                    "contentType": "element",
                                    "tagName": "div",
                                    "children": [
                                        {
                                            "contentType": "element",
                                            "tagName": "h4",
                                            "children": [
                                                {
                                                    "contentType": "text",
                                                    "tagText": "Simple"
                                                }
                                            ],
                                            "attributes": [
                                                {
                                                    "attributeName": "componentid",
                                                    "attributeValue": "74"
                                                },
                                                {
                                                    "attributeName": "style",
                                                    "attributeValue": "text-align: center; padding: 10px; color: #f0f0f0; font-size: 1.5rem; text-transform: uppercase;"
                                                }
                                            ],
                                            "componentID": "74"
                                        },
                                        {
                                            "contentType": "element",
                                            "tagName": "p",
                                            "children": [
                                                {
                                                    "contentType": "text",
                                                    "tagText": "A truly WYSIWYG page editor that gives you the full power of a developer without cluttering your view like other CMS systems, without sacrificing flexibility or ease of use!"
                                                }
                                            ],
                                            "attributes": [
                                                {
                                                    "attributeName": "componentid",
                                                    "attributeValue": "75"
                                                },
                                                {
                                                    "attributeName": "style",
                                                    "attributeValue": "text-align: center; padding: 10px; color: #f0f0f0; font-weight: 200;"
                                                }
                                            ],
                                            "componentID": "75"
                                        }
                                    ],
                                    "attributes": [
                                        {
                                            "attributeName": "componentid",
                                            "attributeValue": "69"
                                        },
                                        {
                                            "attributeName": "style",
                                            "attributeValue": "text-align: center; padding: 10px; background-color: #6495ec; color: #333333; width: calc(33.3333%);"
                                        }
                                    ],
                                    "componentID": "69"
                                },
                                {
                                    "contentType": "element",
                                    "tagName": "div",
                                    "children": [
                                        {
                                            "contentType": "element",
                                            "tagName": "h4",
                                            "children": [
                                                {
                                                    "contentType": "text",
                                                    "tagText": "Elegant"
                                                }
                                            ],
                                            "attributes": [
                                                {
                                                    "attributeName": "componentid",
                                                    "attributeValue": "79"
                                                },
                                                {
                                                    "attributeName": "style",
                                                    "attributeValue": "text-align: center; padding: 10px; color: #f0f0f0; font-size: 1.5rem; text-transform: uppercase;"
                                                }
                                            ],
                                            "componentID": "79"
                                        },
                                        {
                                            "contentType": "element",
                                            "tagName": "p",
                                            "children": [
                                                {
                                                    "contentType": "text",
                                                    "tagText": "The entire page is saved as a JSON file, which can be easily stored on any server. Supply this data to 1 of 3 solutions to display your page: VanillaJS, React or Vue"
                                                }
                                            ],
                                            "attributes": [
                                                {
                                                    "attributeName": "componentid",
                                                    "attributeValue": "80"
                                                },
                                                {
                                                    "attributeName": "style",
                                                    "attributeValue": "text-align: center; padding: 10px; color: #f0f0f0; font-weight: 200;"
                                                }
                                            ],
                                            "componentID": "80"
                                        }
                                    ],
                                    "attributes": [
                                        {
                                            "attributeName": "componentid",
                                            "attributeValue": "70"
                                        },
                                        {
                                            "attributeName": "style",
                                            "attributeValue": "text-align: center; padding: 10px; background-color: #6495ec; color: #333333; width: calc(33.3333%);"
                                        }
                                    ],
                                    "componentID": "70"
                                }
                            ],
                            "attributes": [
                                {
                                    "attributeName": "componentid",
                                    "attributeValue": "71"
                                },
                                {
                                    "attributeName": "style",
                                    "attributeValue": "width: 100%; text-align: center; display: flex; flex-direction: row; gap: 10px; justify-content: space-between"
                                }
                            ],
                            "componentID": "71"
                        }
                    ],
                    "attributes": [
                        {
                            "attributeName": "id",
                            "attributeValue": "about"
                        },
                        {
                            "attributeName": "style",
                            "attributeValue": "\n            min-height: 100vh;\n            padding: 10%;\n            display: flex;\n            flex-direction: column;\n            justify-content: center;\n            align-items: center;\n            color: #33333;\n            background-color: #6495ed;\n          "
                        }
                    ],
                    "componentID": 20
                },
                {
                    "contentType": "element",
                    "tagName": "section",
                    "children": [
                        {
                            "contentType": "element",
                            "tagName": "h1",
                            "children": [
                                {
                                    "contentType": "text",
                                    "tagText": "Try it out"
                                }
                            ],
                            "attributes": [
                                {
                                    "attributeName": "componentid",
                                    "attributeValue": "21"
                                },
                                {
                                    "attributeName": "style",
                                    "attributeValue": "text-transform: uppercase; margin-bottom: 20px; font-size: 3rem; color: #f0f0f0;"
                                }
                            ],
                            "componentID": 21
                        },
                        {
                            "contentType": "element",
                            "tagName": "p",
                            "children": [
                                {
                                    "contentType": "text",
                                    "tagText": "Right-Click to open up the editing menu. The element that you right-click on will be the one you are editing"
                                }
                            ],
                            "attributes": [
                                {
                                    "attributeName": "componentid",
                                    "attributeValue": "22"
                                },
                                {
                                    "attributeName": "style",
                                    "attributeValue": "text-align: center; color: #f0f0f0; font-size: 1.5rem; font-weight: 200;"
                                }
                            ],
                            "componentID": 22
                        }
                    ],
                    "attributes": [
                        {
                            "attributeName": "id",
                            "attributeValue": "projects"
                        },
                        {
                            "attributeName": "style",
                            "attributeValue": "\n            min-height: 100vh;\n            padding: 10%;\n            display: flex;\n            flex-direction: column;\n            justify-content: center;\n            align-items: center;\n            color: #6495ed;\n            background-color: #333333;\n          "
                        }
                    ],
                    "componentID": 23
                }
            ],
            "componentID": 33
        },
        {
            "contentType": "element",
            "tagName": "footer",
            "children": [
                {
                    "contentType": "text",
                    "tagText": "Made by Jason Wandrag"
                }
            ],
            "attributes": [
                {
                    "attributeName": "componentid",
                    "attributeValue": "34"
                },
                {
                    "attributeName": "style",
                    "attributeValue": "position: sticky; bottom: 0px; left: 0px; right: 0px; padding: 1rem 3rem; background-color: #6495ed; text-align: center; box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; color: #f0f0f0;"
                }
            ],
            "componentID": 34
        }
    ],
    "attributes": [
        {
            "attributeName": "id",
            "attributeValue": "app"
        }
    ],
    "componentID": 35
}