Build the DOM from a specification.

See the same small UI created three ways: original HTML, Vanilla JavaScript, and json-to-tag through CDN.

One UI. Three approaches.

Same browser output. Different construction method.

Write the markup

The browser parses HTML directly.

<div id="test-content">
  <label>Name</label>
  <p>Test Content</p>
</div>

Browser output

Name

Test Content

02 · VANILLA JAVASCRIPT ↗

Create nodes manually

Native DOM APIs create each node.

const div = document.createElement("div");
const label = document.createElement("label");
const text = document.createElement("p");

label.textContent = "Name";
text.textContent = "Test Content";

div.append(label, text);

Browser output

Name

Test Content

03 · JSON-TO-TAG CDN ↗

Describe, then build

JSON describes the tree; CDN creates DOM.

const spec = {
  tagName: "div",
  children: [
    { tagName: "label",
      textContent: "Name" },
    { tagName: "p",
      textContent: "Test Content" }
  ]
};

window.ks.jsonToTag
  .buildSpecElement(spec);

Browser output

Name

Test Content

Key idea: The output is identical. The third approach moves the UI description into JSON data and lets the CDN engine compile native DOM.

Start the 5-step tutorial: 01 · Normal HTML →

Documentation →