Explore the 3 Core JSON Renderers

Fast, beginner-friendly component guides structured around the KeshavSoft declarative DOM architecture. Each component is documented with its complete HTML transformation story, a direct CDN ES module import guide, and a global window.ks runtime walkthrough.

Tabular Grid • Multi-Column 📊

Table Renderer

Fast, structured tabular grid generation from JSON row arrays. Automatically creates table headers, rows, striped styling, and hover feedback.

What you will learn:

1. The Pipeline: How json-renderers-build compiles column/row JSON into tags.
2. CDN Integration: Direct ES module import from jsDelivr with zero build step.
3. window.ks Runtime: Standard global runtime API for multi-page applications.
4. Interactive Playground: Live DOM mounting sandbox with dynamic row inspection.

Read Table Guide →

⚡ Using CDN 🌐 window.ks

Form Input • Dropdown Menu ▣

Select Renderer

Constructs accessible native HTML <select> dropdowns from string arrays or value/label objects with active selection management.

What you will learn:

1. The Pipeline: Transforming options arrays into declarative DOM specifications.
2. CDN Integration: Clean ES module import with option addition playground.
3. window.ks Runtime: Enterprise script integration for corporate admin portals.
4. Event Handling: Live change listener with instantaneous selection telemetry.

Read Select Guide →

⚡ Using CDN 🌐 window.ks

Native Autocomplete • Input List 🔍

Datalist Renderer

Binds native HTML5 <datalist> suggestion popovers to text inputs with instant autocomplete without heavy JavaScript plugins.

What you will learn:

1. The Pipeline: Connecting <input list> to <datalist> containers.
2. CDN Integration: Rapid search suggestion generator mounted via jsDelivr CDN.
3. window.ks Runtime: Global browser mounting for native search inputs.
4. Keystroke Tracking: Live suggestion matching and user search feedback.

Read Datalist Guide →

⚡ Using CDN 🌐 window.ks