How It Works in Simple Words
Think of building a house: you need an architect's blueprint before a builder pours concrete. In the KeshavSoft ecosystem, json-renderers-build is the architect.
Raw Data & Config
You provide plain JavaScript arrays or objects containing your business records and simple column definitions.
columns: [ { columnName: "name" } ]
json-renderers-build
Validates your inputs, selects the component blueprint, and compiles everything into a pure JSON
specification AST (specAsJsonToDom).
⚡ 100% Headless: Does not touch the browser window, DOM nodes, or CSS directly.
DOM & Mounting
@keshavsoft/json-to-tag takes the specification tree and creates real browser HTML
elements (<table>, <form>), and json-renderers mounts them into
your container.
📊 End-to-End Visual Dataflow
🎯 Why not build the DOM directly here?
If a library mixes business data, layout logic, and browser DOM manipulation all in one place, you cannot
run it on a Node.js server, inside a Web Worker, or in automated unit tests without loading heavy fake
DOMs
like jsdom.
By keeping json-renderers-build 100% headless, it runs anywhere JavaScript runs, executes in microseconds, and is completely free of DOM side-effects.
🛡️ Built-in Input Safety (Guard System)
Every request passes through an internal guard (guardFunc).
It guarantees:
typeis one of the supported components.datais always an array.- For tables, each item in
columnshas a validcolumnNameand aligns with data row keys. - For forms, input field types are strictly checked against allowed HTML form field types.
What Dependencies Are Used & Why?
Every dependency in this repository has one clear, modular job. Here is the exact list from package.json explained in simple words.
| Dependency Name | Version | Role in Simple Words | Why Are We Using It? |
|---|---|---|---|
| json-renderers-build-table Component | ^1.17.3 |
Table specification builder |
Generates full table specifications (<table>, <thead>, <tbody>, cells,
widths) with Bootstrap styling so we don't have to handwrite repetitive table loops.
|
| json-renderers-build-form Component | ^1.1.0 |
Form specification builder | Compiles a list of column definitions into complete vertical Bootstrap form layouts (labels, inputs, selects, textareas, checkboxes, submit buttons) with full accessibility attributes. |
| json-renderers-build-input-row Component | ^1.1.0 |
Search & input row builder |
Provides 3 ready-made search input flavours (inputOnly, inputWithLabel, inputWithLabelButton) for
standardized search and filter rows.
|
| json-transformer-funcs Data Helper | ^1.24.6 |
Array & collection transformer |
Provides the functional fromCollection() utility to map raw arrays of
strings or objects into <option> blueprint nodes for select
dropdowns and datalists without mutation.
|
| json-to-spec Compiler | ^32.1.3 |
Core AST compiler engine |
The foundational AST compilation engine in the KeshavSoft ecosystem. Merges declarative skeleton
templates (skeleton.json) with dynamic data variables.
|
| vite Dev Tool | ^5.4.2 |
Bundler & Development server |
Bundles modular ES code from src/ into minified distribution files
(docs/dist/v22/min.js) and provides local dev servers for live testing.
|
1. json-renderers-build-table
What it does: Creates table specifications with columns, headers, rows, and buttons.
Why we use it: Instead of writing 100+ lines of loop code to build table headers, body
rows, cell alignments, and Bootstrap table classes, we call its simple() function which returns a tested, standard table
specification.
2. json-renderers-build-form
What it does: Compiles schema definitions into vertical HTML forms.
Why we use it: Generates accessible form fields with proper labels, IDs, validation,
input
types (text, email, select, textarea), and submit buttons in one
declarative call.
3. json-renderers-build-input-row
What it does: Generates flexible search boxes and input control rows.
Why we use it: Easily switch between standalone search boxes, labeled inputs, or inputs with attached search buttons without writing custom markup.
4. json-transformer-funcs
What it does: Transforms collections and arrays into target formats.
Why we use it: When building select dropdowns, it takes an array of strings or objects
and uses fromCollection() to map each item into an <option> specification cleanly without manual array mutation.
5. json-to-spec
What it does: Merges component templates with data to produce AST specs.
Why we use it: It provides the underlying template compiler engine that replaces template
variables like ${columnName} and ${rowValue}
inside component skeletons into completed JSON specification ASTs.
6. vite
What it does: Fast local build tool and development server.
Why we use it: Compiles and minifies the ES module files into single standalone script
files in docs/dist/ (e.g., min.js) so developers can load the library via CDN or script tag
without installing npm packages.
Live Component Playground
Select any component below to see the JavaScript input, compile the headless specification AST live in your
browser, and view the mounted HTML element rendered via @keshavsoft/json-to-tag.
render(config) from the compiled bundle.2. Outputs the JSON specification tree AST.
3. Calls
window.ks.jsonToTag.buildSpecElement(spec) to create
the live DOM node and displays it in the preview box.
// Spec will appear here...
Sample Folder Overview
The samples/ directory contains working implementations testing
different component types and real-world integration patterns.
📊 Table Component Sample
Demonstrates generating a table with custom column widths, batch item records, and compiling via type: "tableFromSpec".
📝 Vertical Form with Submit
Shows a column-driven Bootstrap form with name, email, role select, notes textarea, updates checkbox, and captures live form submit events.
🔍 Search Input & Button
Tests search inputs with customizable labels, placeholders, input IDs, and attached search action buttons.
🔽 Standalone Select Dropdown
Creates a full <select> element AST populated with <option> tags from an array of strings.
⚡ Options Only Fragment
Useful when you already have an existing <select> in HTML and only
need to generate the dynamic <option> children to append to it.
🪟 Modal Dialog on Row Click
Advanced demonstration where clicking an action button on a table row dynamically compiles and renders a child batches table inside a Bootstrap modal.
Quick Start & Installation
Ready to use json-renderers-build in your project? Follow these quick
steps.
1. Install via NPM
Install into your Node.js or bundler project:
Use in ES module code:
const spec = render({
type: "table",
columns: [{ columnName: "Name" }],
data: [{ Name: "Acme Corp" }]
});
2. Load in Browser via CDN
Use directly in any HTML file without build tools:
import render from "https://cdn.jsdelivr.net/gh/keshavsoft/json-renderers-build@main/docs/dist/v22/min.js";
import "https://keshavsoft.github.io/json-to-tag/dist/v9/min.js";
const spec = render({
type: "select",
data: ["Retail", "Wholesale", "Export"]
});
const element = window.ks.jsonToTag.buildSpecElement(spec);
document.getElementById("container").replaceChildren(element);
</script>