Architecture & Design System | json-to-dom-renderers

The Mental Model: Two Libraries, Two Roles

Modern frameworks typically build an in-memory Virtual DOM tree, run complex reconciliation heuristics on every tick, and ship tens of kilobytes of runtime overhead.

KeshavSoft splits this into two hyper-focused, zero-dependency tools:

┌──────────────────────────────────────────────────────────────────────────────────┐ │ THE JSON WORLD │ │ (Managed by json-to-dom-renderers) │ │ │ │ Application Data ───► State Stores ───► Calculations ───► JSON Element │ │ (columns, rows, (TableStore, (aggregates, Specification │ │ configs, themes) FormStore) eval formulas) Tree (inSpec) │ └────────────────────────────────────────┬─────────────────────────────────────────┘ │ THE ARCHITECTURAL BOUNDARY │ window.ks["json-to-dom"].buildSpecElement({ inSpec }) │ ┌────────────────────────────────────────▼─────────────────────────────────────────┐ │ THE DOM WORLD │ │ (Managed by json-to-dom) │ │ │ │ Recursive DOM Builder ───► Native DOM Elements ───► Surgical Repainters │ │ (pure DOM APIs: (<table>, <form>, (repaintBody, repaintFoot) │ │ createElement, attrs) <datalist>) │ └──────────────────────────────────────────────────────────────────────────────────┘

Library	Core Role	Input → Output	Domain Focus
json-to-dom-renderers	High-Level JSON-to-JSON Transformer & State Coordinator	Data + Schema → inSpec (JSON)	Table calculations, serials, multi-tier footer aggregates, formula evaluations, autocomplete frequency profiling, REST CRUD.
json-to-dom	Low-Level Native DOM Compiler	inSpec (JSON) → Native HTMLElement	Pure browser DOM creation, attribute bindings, event delegation, fast recursive node generation. Zero knowledge of business tables or forms.

The Complete End-to-End Pipeline

Step 1

State & Ingestion

Raw rows, column definitions, and layout configurations are passed into TableStore or FormStore.

Step 2

JSON Spec Generation

Pure JSON specification tree is assembled: header cells, body rows, calculated aggregates, and form input controls.

Step 3

DOM Compilation

json-to-dom compiles the specification into native elements in a single synchronous pass.

Surgical Repainting Loop

When records change or search filters are applied, the table header does not re-render. Instead:

repaintBody: Only the <tbody> contents are recompiled and replaced.
repaintFoot: Only footer aggregates (sum, averages, taxes) are recomputed and updated.
Zero layout thrashing, preserving scroll positions, column widths, and input focus.