▣
json-renderers Select • CDN

Direct CDN Import Integration Guide

Method 1 • Direct CDN Import

How to Render HTML Select Using Direct CDN Import

Learn how to import the render function directly from jsDelivr into your browser ES Module without any build step, bundlers, or npm installations.

💡 How It Works 📄 Code Walkthrough ⚡ Interactive CDN Demo 📂 Open samples/select/byCdn →
Concept

The 3-Step CDN Story

1

1. Target Container

Place an empty <div id="select-output"></div> anywhere in your HTML document where the select should be mounted.

2

2. Import from CDN

Use native browser ES Modules (<script type="module">) to import the renderer from jsDelivr.

3

3. Call render()

Pass { type: "select", data: [...], targetHtmlId: "..." }. The library creates the DOM nodes and mounts them immediately.

Implementation

Complete HTML Page Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Select CDN Demo</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body class="p-4">

  <!-- 1. Target container for the rendered select -->
  <div id="select-output"></div>

  <!-- 2. ES Module Script importing directly from jsDelivr CDN -->
  <script type="module">
    import render from "https://cdn.jsdelivr.net/gh/keshavsoft/json-renderers@main/docs/dist/v14/min.js";

    // 3. Define the options array
    const cities = ["Hyderabad", "Bengaluru", "Chennai", "Mumbai", "Pune"];

    // 4. Render into DOM
    render({
      type: "select",
      data: cities,
      targetHtmlId: "select-output",
      showLog: true
    });

    // 5. Add standard change listener
    const select = document.querySelector("#select-output select");
    if (select) {
      select.addEventListener("change", (e) => {
        alert("You selected: " + e.target.value);
      });
    }
  </script>
</body>
</html>
Live Experience

Interactive CDN Demo & Code Generator

Ready

🖥️ Live Mounted Select

#cdn-live-output
Selected Value: (None)
Execution Console Log 
Ready.
Active CDN Snippet 
Loading snippet...

This snippet matches your active dataset in real time.