Render Business JSON into Live DOM
Powered by json-renderers-build + json-to-tag
The real DOM creation happens in @keshavsoft/json-to-tag. Before that, component blueprints are prepared in json-renderers-build, and json-renderers orchestrates the runtime flow and mounts the final HTML into your browser container.
Simple House-Building Story
json-renderers is the browser runtime layer in the
KeshavSoft declarative UI ecosystem. It accepts render configuration, obtains a JSON description of the
requested component, asks @keshavsoft/json-to-tag
to create DOM nodes, and mounts the result in the requested browser container.
It is an orchestration layer rather than the specification compiler itself. The component structure is
prepared upstream by json-renderers-build;
actual element construction is delegated to @keshavsoft/json-to-tag.
json-renderers-build
The ArchitectPrepares a clean JSON blueprint specifying tags, classes, and attributes without touching real browser DOM elements.
@keshavsoft/json-to-tag
The Construction Worker
Reads the JSON blueprint and creates real native browser HTML elements using document.createElement().
json-renderers
The Site Manager
Puts those constructed elements in the correct target position on the webpage (targetHtmlId) and manages placement.
Build prepares the blueprint → json-to-tag creates the DOM → json-renderers mounts it on the page.
Explore the 3 Component Suites
Table Renderer
Multi-column tabular data rendering from JSON row objects with hover states and column configurations.
Select Renderer
Native dropdown components populated from string or object arrays with live change tracking.
Datalist Renderer
Native browser search autocomplete popovers linked to input controls without heavy plugins.
📦 Installation & Distribution
npm install json-renderersimport render from "https://cdn.jsdelivr.net/gh/keshavsoft/json-renderers@main/docs/dist/v14/min.js";