🌱 Quick Conceptual Guide • 3 min read

json-renderers

Render JSON-driven UI into the browser:

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.

Simple House-Building Story

1. json-renderers-build — The Architect: prepares a JSON blueprint.

2. json-to-tag — The Construction Worker: reads the blueprint and creates real HTML elements.

3. json-renderers — The Site Manager: puts those elements in the correct place on the webpage.

Example: Show a Student Table

Send student data and column names.
json-renderers-build prepares the table specification.
json-to-tag creates the HTML table elements.
json-renderers mounts the table inside the target container.

<div id="students"></div>
<script type="module">
import render from "json-renderers";
render({
  type: "table",
  targetHtmlId: "students",
  data: [{ name: "Ravi", city: "Kakinada" }],
  columns: ["Name", "City"]
});
</script>

Remember

Build prepares the blueprint → json-to-tag creates the DOM → json-renderers mounts it on the page.

Official repository: github.com/keshavsoft/json-renderers

Next Track • In-Depth

Read Advanced Guide →