@keshavsoft/json-to-tag • Declarative JSON-to-DOM Compiler & Tools

Engine Architecture & Paradigm Comparison

HTML vs. Vanilla JS vs. json-to-tag: What's the Difference?

Compare how the exact same UI component is created across the three Web Platform approaches — and why declarative JSON specifications offer the ideal balance of portability, safety, and simplicity.

Approach 1 · Raw Markup Static String

Normal HTML

Writing direct HTML tags in files or template strings. The browser's C++ parser converts tags into DOM objects.

// Direct HTML Markup

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

Native & familiar: Standard HTML tags understood natively by all browsers.

Not JSON serializable: Cannot be safely transmitted across REST APIs or stored in databases.

XSS vulnerability: Dynamic rendering requires innerHTML, exposing apps to script injection.

Read 01 · Normal HTML Guide

Approach 2 · Imperative Code DOM APIs

Vanilla JavaScript

Manually instantiating DOM nodes via document.createElement() and assembling hierarchy node-by-node.

// Imperative Node Creation

const wrap = document.createElement("div");
wrap.id = "test-content";
const lbl = document.createElement("label");
lbl.textContent = "Name";
const p = document.createElement("p");
p.textContent = "Test Content";
wrap.append(lbl, p);

Safe from innerHTML XSS: Direct property assignments prevent HTML script injection attacks.

5x-10x code verbosity: Heavy manual boilerplate for every single tag, property, and child node.

Imperative spaghetti: Executable code that cannot be transferred across networks or cached.

Read 02 · Vanilla JS Guide

The Simple Way

Approach 3 · Declarative JSON UI as Data

json-to-tag Specification

Pure JSON tree specification that buildSpecElement(spec) compiles directly into native DOM in a single call.

// Declarative Spec & 1-Line Compile

const spec = {
  tagName: "div",
  attributes: { id: "test-content" },
  children: [
    { tagName: "label", textContent: "Name" },
    { tagName: "p", textContent: "Test Content" }
  ]
};
const el = buildSpecElement(spec);

100% JSON Serializable: Save in database, transmit over REST/GraphQL, or edit in Monaco.

Zero Runtime Dependencies: Compiles straight to standard DOM with zero framework bloat.

Strict tags.json Validation: Single source of truth checks tag schemas, attributes, and children.

Read 03 · JSON Spec Guide

Architectural Paradigm Matrix Side-by-Side Evaluation

Feature / Metric	Normal HTML	Vanilla JavaScript	json-to-tag (The Simple Way)
Data Format	Static HTML markup string	Imperative JS statements	Pure JSON Tree Object
API & DB Portability	Fragile string concatenation	Cannot serialize executable code	100% JSON REST / DB Ready
XSS Injection Safety	High risk when using `innerHTML`	Safe (property assignment)	Safe (Native node creation)
Code Verbosity & Effort	Low (templates only)	5x-10x boilerplate lines	Minimal declarative schema
Schema & Capability Checks	Browser silently ignores errors	No schema validation ahead of time	`tags.json` Single Source of Truth
Runtime Dependencies	Zero dependencies	Zero dependencies	Zero dependencies (Native DOM)

Code Integration

Integrate with 2 Lines of JavaScript

Works seamlessly in modern ES Module environments, Bundlers (Vite, Webpack, Rollup), and directly inside browser script tags via automatic window.ks.jsonToTag registration.

Try Live in Editor NPM Registry

app.js (ES Module & Browser)

// 1. ES Module Import:
import { buildSpecElement } from "@keshavsoft/json-to-tag";

// 2. Compile directly (v9 engine):
const domElement = buildSpecElement(mySpec);
document.getElementById("container").appendChild(domElement);

// 3. Browser Global (CDN auto-registered):
const node = window.ks.jsonToTag.buildSpecElement(mySpec);