The htmx JavaScript API

<select id="country">
  <option value="">Choose a country</option><option>Japan</option><option>Kenya</option><option>Peru</option>
</select>
<p id="facts"></p>
<script>
  // Plain JavaScript decides when to call htmx.
  document.getElementById("country").addEventListener("change", (e) => {
    if (e.target.value) htmx.ajax("GET", "/facts?country=" + encodeURIComponent(e.target.value), "#facts");
  });
</script>

<!-- The pretend server: on a real site this part is your backend (Python, PHP, Node, Go...) -->
<script>
  const capitals = { Japan: "Tokyo", Kenya: "Nairobi", Peru: "Lima" };
  server.get("/facts", (req) => `The capital of ${server.escape(req.query.country)} is ${capitals[req.query.country]}.`);
</script>

<button id="add">Add a widget with JavaScript</button>
<div id="area"></div>
<script>
  document.getElementById("add").addEventListener("click", () => {
    const box = document.createElement("div");
    box.innerHTML = '<button hx-get="/hi" hx-swap="outerHTML">I was added by JavaScript: click me</button>';
    document.getElementById("area").append(box);
    htmx.process(box);   // remove this line and the new button does nothing
  });
</script>

<!-- The pretend server: on a real site this part is your backend (Python, PHP, Node, Go...) -->
<script>
  server.get("/hi", () => "<p>It works, because htmx.process() activated the button.</p>");
</script>