htmx is a library that allows you to access modern browser features directly from HTML, rather than using javascript.
Read htmx docs for more (and v4)
Modern frontend development often swings between two extremes: heavy client-side frameworks or minimal server-rendered HTML. Pairing Kaida with htmx lands you in a kinda middle ground: neat UI components plus server-driven interactivity, without SPA overhead.
This article walks through how to combine Kaida with htmx effectively, what to watch out for, and real examples you can adapt.
Core idea:
- Kaida provides beautifully styled UI components (buttons, cards, dialogs, etc.)
- htmx enhances HTML with attributes like hx-get, hx-post, hx-target.
Simple button example: just add hx-* to Kaida components
// Button component can be used:
// https://kaida.dev/docs/button
<button class="kaida-button-styles"
hx-post="/like"
hx-target="#like-count"
hx-swap="outerHTML">
👍 Like
</button>
<span id="like-count" class="kaida-badge-styles">10</span>
The process:
1. htmx sends request.
2. Server returns updated HTML.
3. DOM gets replaced by htmx.
Result:
<span id="like-count" class="kaida-badge-styles">11</span>
Server-driven UI
Return HTML components and fragments from the server.
Reasoning:
- Simpler JavaScript & frontend.
- Server owns rendering.
- The whole structure is cleaner and the process is more pleasant, no need to fight your way through the complexities of heavy SPA frontend.
Example of loading a card list:
<div hx-get="/products"
hx-trigger="load"
hx-target="#product-list">
</div>
<div id="product-list"></div>
Server returns:
// For product miniature Card component can be used:
// https://kaida.dev/docs/card
<div class="kaida-card-styles">
<h3 class="text-h8">Product A</h3>
...
</div>
<div class="kaida-card-styles">
<h3 class="text-h8">Product B</h3>
...
</div>
Forms without JavaScript
htmx makes forms behave like AJAX automatically.
<form hx-post="/signup" hx-target="#result">
<input name="email" placeholder="Email">
<button class="kaida-button-styles">Sign up</button>
</form>
<div id="result"></div>
Server response:
// Toast component can be used:
// https://kaida.dev/docs/toast
<div class="kaida-toast-styles">
Thanks for signing up!
</div>
No JS needed (of course, JS is used under the hood of htmx to make it happen, htmx works like a declarative layer over browser JS API). Kaida handles styling, htmx handles behavior.
Modals (dialogs) with Kaida + htmx
Trigger:
// Toast component can be used:
// https://kaida.dev/docs/toast
<button class="kaida-button-styles"
hx-get="/modal"
hx-target="#modal-container"
hx-swap="innerHTML">
Open modal
</button>
<div id="modal-container"></div>
Server returns:
<div class="kaida-modal-styles">
<h2>Welcome</h2>
<p>This is a modal loaded via htmx and styled with Kaida.</p>
</div>
Stack / architecture example
Reasonable Kaida + htmx stack looks like:
- Backend: Django / Rails / Go / Node (server-rendered views)
- Frontend:
- Kaida provides styled UI components.
- htmx provides interactivity.
- Optional JS for various enhancements. (Important to note: Kaida components include built-in JavaScript for interactivity, and you can add a variety of visual enhancements using Kaida Effects.)
When to use Kaida + htmx
Great for:
- Dashboards.
- Admin panels.
- CRUD apps.
- Internal tools.
- Content-heavy sites.
Less ideal for:
- Complex real-time apps (e.g. Figma-like tools, data-heavy interactive chart dashboards)
Conclusion
Using Kaida with htmx is about composition:
- Kaida defines how things look and interacted.
- htmx defines how things change.
Together, they give you a fast, maintainable, and powerful way to build modern web apps, without unnecessary complexity of current SPA frontend frameworks.