Build Declarative UI Specifications
Headless,
Pure, and Config-Driven
json-renderers-build transforms raw data arrays and column definitions
into a pure DOM specification AST (specAsJsonToDom). This repo
does not live in the browser DOM layer. It is the headless spec generator, while the actual DOM creation is
handled by @keshavsoft/json-to-tag and the runtime mount step is
performed by json-renderers.
The 3-Tier Declarative Pipeline
Understanding the division of labor between json-to-spec, json-renderers-build (this repo), and json-renderers.
json-to-spec
The low-level template compiler engine. Evaluates operations like loopCollection, loopObject, and loopArray on raw skeleton files.
jsonToSpec(skeleton, context)
json-renderers-build
Headless UI Spec Builder. Encapsulates predefined component blueprints (table, select,
selectOptionsOnly) and returns pure JSON-to-DOM AST
specifications. Zero DOM coupling.
render({ type, data, columns })
json-renderers & json-to-tag
The browser DOM consumer. Ingests the specification AST generated by json-renderers-build, instantiates concrete DOM nodes, and mounts
into container elements.
container.append(jsonToTag(spec))
src/index.js → src/v24/index.js
The package entry always points to the active version in src/v24.
Each renderer type sits in its own folder, and the index files stay thin by delegating to focused helper modules.
Interactive Specification Compiler
The compiler runs purely in memory via render({ type, data, columns }). No DOM nodes are created
during this stage.
// Click Compile to generate specAvailable Skeletons in v3
Constructs complete Bootstrap-ready data tables with <table class="table table-hover table-striped mb-0">, repeating
headers from columns, and row values from data.
Constructs a complete <select id="LedgerName"> containing an
array of <option value="..."> elements from a primitive array of
strings.
Generates an un-wrapped fragment spec containing only the array of <option> nodes, tailored for appending into existing select inputs.
Included Verification Samples
Table Spec Demo
Demonstrates table specification generation using real multi-column batch data.
Select Spec Demo
Demonstrates complete select dropdown specification generation from string arrays.
Options Fragment Demo
Demonstrates option fragment generation for populating existing dropdown elements.
📦 Installation & Distribution
npm install json-renderers-buildimport render from "https://cdn.jsdelivr.net/gh/keshavsoft/json-renderers-build@main/docs/dist/v3/min.js";