JS json-to-spec Guide
Step-by-Step Guide

How to Build UIs with json-to-spec

Follow this quick 4-step tutorial to declare a blueprint, supply data, compile the spec, and render it into the live DOM.

1

Define the UI Blueprint (structure.json)

Create a declarative JSON tree. When a dynamic repeat point is needed, use "operation": "iterate": 

{
  "tagName": "div",
  "attributes": { "class": "card p-4 shadow-sm" },
  "children": [
    { "tagName": "h3", "textContent": "${title}", "attributes": { "class": "h5 mb-3" } },
    {
      "operation": "iterate",
      "source": "users",
      "template": {
        "tagName": "div",
        "attributes": { "class": "d-flex justify-content-between py-2 border-bottom" },
        "children": [
          { "tagName": "span", "textContent": "${$number}. ${name}" },
          { "tagName": "span", "textContent": "${role}", "attributes": { "class": "badge bg-primary" } }
        ]
      }
    }
  ]
}
2

Provide the Data Payload (data.json)

{
  "title": "Engineering Team Directory",
  "users": [
    { "name": "Karthik", "role": "Lead Architect" },
    { "name": "Praveen", "role": "Frontend Engineer" },
    { "name": "Suresh", "role": "DevOps Engineer" }
  ]
}
3

Compile & Render to DOM

import { compile } from "https://keshavsoft.github.io/json-to-spec/dist/v1/min.js";
import { buildSpecElement } from "https://keshavsoft.github.io/json-to-dom/dist/v16/min.js";

// 1. Compile structure + data into spec
const spec = compile({
    inStructure: structureBlueprint,
    inData: dataPayload
});

// 2. Render directly via json-to-dom
const domNode = buildSpecElement({ inSpec: spec });
document.getElementById("app").appendChild(domNode);