Render JSON-driven UI into the browser.

1. What is json-renderers?

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.

2. A simple story everyone can understand

Imagine we are building a house. The same idea helps explain how a UI becomes real HTML on a webpage.

Example: displaying a student table

1. We provide student data.
   For example: student names and their cities, plus the ID of the HTML container.
2. The architect prepares the blueprint.
   json-renderers-build produces a JSON specification describing the table.
3. The construction worker builds the table elements.
   json-to-tag reads that specification and creates the HTML DOM elements.
4. The site manager puts the table in place.
   json-renderers mounts the result inside the target HTML container, so the user can see the table.

3. Architecture and rendering pipeline

The README describes the flow from application inputs to the final browser DOM as a staged pipeline:

1. The application calls the render function.
   The configuration includes values such as type, targetHtmlId, data, and optionally columns.
2. The builder prepares the component specification.
   The json-renderers-build package combines the component blueprint with the supplied data and returns a JSON spec.
3. The JSON spec is converted into DOM.
   @keshavsoft/json-to-tag constructs the relevant HTML elements from that specification.
4. The runtime mounts the generated elements.
   The renderer resolves the destination element and applies its mounting behavior.

3. Main features

Documented renderer types: table, select, and selectOptionsOnly.

4. Installation

Option A — npm

Install the package in your JavaScript project:

npm install json-renderers

Then import the default render function in your JavaScript module:

import render from "json-renderers";

Option B — browser ES module bundle

The README documents loading the v13 bundle from jsDelivr:

<script type="module" src="https://cdn.jsdelivr.net/gh/keshavsoft/json-renderers@main/docs/dist/v13/min.js"></script>

According to the README, the browser bundle registers a global API at window.ks.jsonRenderers, including renderToDom.

5. Quick start examples

Each example needs a destination element in the HTML and a call to render with the corresponding options. The snippets below follow the examples documented in the repository README.

Example A — render a table

<div id="table-container"></div>

import render from "json-renderers";

const records = [
  { id: 101, name: "Alpha Enterprise", city: "Hyderabad" },
  { id: 102, name: "Beta Logistics", city: "Bengaluru" }
];

render({
  type: "table",
  targetHtmlId: "table-container",
  data: records,
  columns: ["Name", "City"]
});

Expected result: a table is mounted inside the #table-container element, showing the selected columns and data rows.

Example B — render a select dropdown

<div id="dropdown-container"></div>

import render from "json-renderers";

render({
  type: "select",
  targetHtmlId: "dropdown-container",
  data: ["Account Receivable", "Account Payable", "Sales Revenue"]
});

Expected result: a select element is generated with the supplied values as options.

Example C — add options to an existing select

<select id="user-role-select" class="form-select">
  <option value="" disabled selected>Select Role...</option>
</select>

import render from "json-renderers";

render({
  type: "selectOptionsOnly",
  targetHtmlId: "user-role-select",
  data: ["Administrator", "Editor", "Viewer"]
});

Expected result: options for Administrator, Editor, and Viewer are added to the existing select control.

6. API reference

The README documents the default export as a render function receiving one options object.

render({
  type = "table",
  targetHtmlId,
  data,
  columns,
  appendPosition,
  showLog = false
});

Return value

The README describes the return value as an HTMLElement representing the mounted DOM container.

7. How it differs from json-renderers-build

These packages work together, but they have different responsibilities.

8. Project structure

The README describes the repository as organized around source runtime code, browser documentation/build output, and runnable samples.

json-renderers/
├── docs/                     # Documentation and distribution
│   ├── dist/                 # Built browser bundles
│   │   ├── min.js
│   │   └── v13/min.js
│   └── index.html            # Docs and interactive workbench
├── samples/                  # Browser examples
│   ├── table/
│   ├── select/
│   └── selectOptionsOnly/
├── src/                      # Source code
│   ├── index.js              # Package entry
│   └── v13/                  # Runtime implementation
│       ├── buildSpec/
│       ├── meta.js
│       ├── registerGlobal.js
│       └── index.js
├── package.json
├── vite.config.js
└── README.md

File paths and bundle names can change over time; use the repository’s current default branch as the source of truth.

9. Development and build

To run the project locally, the README documents the following commands:

# Install dependencies
npm install

# Start the Vite development server
npm run dev

# Build production bundles
npm run build

Use npm run dev to work with the project locally, then npm run build to build the production bundles described in the README. Consult package.json for the exact scripts in the current checkout.

Practical troubleshooting

• Nothing renders: confirm the target container exists and that targetHtmlId matches its ID exactly.
• Wrong component appears: check the type value and the shape of data.
• Table columns are missing: verify the columns array matches the intended record properties/headers.
• Unexpectedly replaced content: review appendPosition; the README describes replacement as the default and prepend as an alternative.

10. Official links and references

This guide is based on the repository’s README and documentation links available when the page was prepared. Check these sources for the latest implementation details.

License The README identifies the project as MIT-licensed. See the repository’s current LICENSE file for the license text.