structure.json + data.json → spec.json

Pure JSON Specification Compiler for Declarative UI

Eliminate template synchronization friction. The 2-file compiler separates HOW to display from WHAT to display, outputting standard specification JSON ready for json-to-dom.

⚡ Launch Live Playground 📦 Explore CDN Samples

Documentation & Guides

💡 Core

What is json-to-spec?

The 2-file specification compiler contract, core properties, and why data-in / data-out transforms matter.

Read Guide →

🎯 Rationale

Why this repo exists

The flaws of string templates, heavy component frameworks, and multi-file orchestrators solved by the 2-file model.

Read Rationale →

🚫 Boundaries

What json-to-spec is NOT

Clear non-goals: not a DOM renderer, not a virtual DOM, not a CSS framework, and not an imperative eval engine.

Read Boundaries →

⚙️ Internals

Runtime Architecture

Compiler pipeline breakdown: traversal, operation detection, filter evaluation, and safe token interpolation.

Read Architecture →

📘 Tutorial

How It Works

Step-by-step tutorial: create structure.json, provide data.json, compile, and render live DOM with json-to-dom.

Read Tutorial →

🧪 Samples

Samples & Demos

Pre-built live workbenches for Dynamic Forms and Nested Tables loading compiler bundles directly from CDN.

Open Samples →

30-Second Integration

How It Works in Your Application

Pure CDN • ES Modules

// 1. Import compiler & DOM engine directly via GitHub Pages CDN (or npm package) 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"; // 2. Compile structure.json (HOW) + data.json (WHAT) → spec const spec = compile({ inStructure: structureBlueprint, inData: businessDataPayload }); // 3. Render directly into native browser DOM elements const domNode = buildSpecElement({ inSpec: spec }); document.getElementById("app").appendChild(domNode);

Official CDN Endpoints

Latest Stable CDN https://keshavsoft.github.io/json-to-spec/dist/min.js

Version 1 CDN https://keshavsoft.github.io/json-to-spec/dist/v1/min.js