Global Window Object Guide • Select Component

window.ks.jsonRenderers.renderToDom

Understand how the global window.ks runtime allows any script on your page to mount dynamic select dropdowns directly from JSON data without modular imports.

📖 The Story: Why Use Global window.ks?

When developing large enterprise web pages, administrative dashboards, or legacy PHP/JSP templates, not every piece of code is bundled through Vite or Webpack. In these architectures, you include one script tag in the page header, which registers the window.ks global object.

No Module Scoping

Accessible everywhere in the window context without import statements.

Lightweight Setup

Load the minified bundle once, render 50 different select dropdowns anywhere.

Zero InnerHTML Risk

Builds real DOM elements under the hood using json-to-tag.

⚙️ Complete Implementation Code

// 1. Load the bundle to attach window.ks globally
await import("https://cdn.jsdelivr.net/gh/keshavsoft/json-renderers@main/docs/dist/v14/min.js");

// 2. Define your options array
const ledgerNames = [
  "Cash in Hand",
  "Standard Chartered Bank",
  "Sundry Debtors",
  "Office Equipment",
  "Sales Revenue"
];

// 3. Render select element into the DOM
window.ks.jsonRenderers.renderToDom({
  type: "select",
  data: ledgerNames,
  targetHtmlId: "dom-render-container",
  showLog: true
});

// 4. Attach event listeners
const selectElement = document.querySelector("#dom-render-container select");
if (selectElement) {
  selectElement.addEventListener("change", (e) => {
    console.log("Selected ledger:", e.target.value);
  });
}

Live Execution

Live Demo: Mounted via window.ks

Loading...

Select Dataset Preset:

Container: #dom-render-container window.ks.jsonRenderers.renderToDom()

Initializing window.ks...

Selected Value: (None)