Build native DOM from JSON via CDN.
Connect your JSON specification to the json-to-tag CDN engine. With zero Node.js and zero build steps, the browser compiles the JSON tree into native DOM elements.
1 · Complete HTML Document Example
A standalone, ready-to-run HTML file you can copy into your project:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>json-to-tag CDN Demo</title>
<!-- 1. Include json-to-tag engine via CDN (Zero dependencies, < 2KB) -->
<script src="https://keshavsoft.github.io/json-to-tag/dist/v4/min.js"></script>
</head>
<body>
<!-- 2. Mount point for your constructed DOM element -->
<div id="browser-output"></div>
<script>
// 3. Define the UI specification
const spec = {
tagName: "div",
attributes: { id: "test-content" },
children: [
{ tagName: "label", textContent: "Name" },
{ tagName: "p", textContent: "Test Content" }
]
};
// 4. Call global builder exposed on window.ks.jsonToTag
const element = window.ks.jsonToTag.buildSpecElement(spec);
// 5. Mount the native DOM element into the page
document.querySelector("#browser-output").replaceChildren(element);
</script>
</body>
</html>
2 · Sample JSON Specification
{
"tagName": "div",
"attributes": { "id": "test-content" },
"children": [
{ "tagName": "label", "textContent": "Name" },
{ "tagName": "p", "textContent": "Test Content" }
]
}
3 · Live Browser Output (CDN Engine)
Below is the real native DOM element built live in this browser window by calling buildSpecElement(spec):
How the CDN Engine Operates
STAGE 1
Include Bundle
The CDN script executes in the global context, registering window.ks.jsonToTag.
STAGE 2
buildSpecElement
Receives your JSON tree, validates tag names, applies attributes, and recursively builds children.
STAGE 3
Mount Element
Returns an authentic HTMLElement ready to insert with append() or replaceChildren().
Next: see how to feed dynamic data and inputs into json-to-tag →