Model UI as a declarative JSON tree.
Instead of writing imperative JavaScript commands, json-to-tag represents UI components as pure, serializable JSON specifications that any environment can generate, send, or store.
1 · The JSON Specification
{
"tagName": "div",
"attributes": { "id": "test-content" },
"children": [
{ "tagName": "label", "textContent": "Name" },
{ "tagName": "p", "textContent": "Test Content" }
]
}
2 · Key Specification Fields
Every specification node uses simple, standardized keys:
01 · TAG
tagName
The native HTML tag to instantiate (e.g. "div", "label", "input", "button").
02 · ATTRIBUTES
attributes
Key-value map of standard HTML attributes like id, class, placeholder, or type.
03 · CHILDREN
children
An array of nested specifications. Each child is built recursively using the exact same model.
3 · The Architectural Shift
UI as Data: Instead of coupling your UI structure to client-side templates or heavy JSX compilers, your UI is now valid, standard JSON. It can be sent over HTTP APIs, generated dynamically on backend servers, stored in databases, or loaded from flat
.json files.
Next: see how to load json-to-tag in HTML via CDN and compile this specification live →