JX is a tiny declarative templating helper for HTML. It binds elements to URLs using jx-get / jx-post, fetches JSON, and renders it into native <template> elements with {{ bindings }}, loops, conditionals, and optional caching.

No build tools. No dependencies. Just drop it in.

• Use <template> with {{ variable }} bindings
• Auto-fetch on click via jx-get / jx-post
• Loops with jx-each="items"
• Conditionals with jx-if="condition"
• Attribute interpolation (src="{{ url }}")
• Optional localStorage caching (jx-save="key")
• Minimal API for manual loading

<template id="user-template">
  <div>
    <h3>{{ name }}</h3>
    <p>{{ email }}</p>
  </div>
</template>

<button jx-get="/api/user" jx-template="user-template">
  Load User
</button>

<script src="jx.js"></script>

Clicking the button fetches JSON and replaces the <template> with rendered HTML.

<template id="list">
  <ul>
    <li jx-each="items">{{ name }}</li>
  </ul>
</template>

<div jx-if="isAdmin">Admin Panel</div>

<button
  jx-get="/api/dashboard"
  jx-template="dash"
  jx-save="dashboard-cache">
  Load Dashboard
</button>

Load from cache manually:

JX.loadCached("dashboard-cache", "dash");

JX.bind("#btn", {
  url: "/api/profile",
  template: "profile",
  method: "GET",
  save: "profile-cache"
});

Trigger immediately:

JX.load("#btn", {
  url: "/api/profile",
  template: "profile"
});

JX.json("user-template", { name: "Ava", email: "a@example.com" });

{
  "name": "John Doe",
  "email": "john@example.com",
  "items": [
    { "name": "Item A" },
    { "name": "Item B" }
  ]
}