Server-driven UI components for htmx

A small Tailwind CSS component library for apps where the server renders HTML. Copy the markup, swap fragments with htmx, and theme everything with a handful of CSS variables.

What do you think ? Let me know...

Check: https://susonwaiba.github.io/htmx-ui/
Opensource: https://github.com/susonwaiba/htmx-ui

We updated our grid to support a full Gantt chart could follow the hypermedia approach: the server sends HTML, and the page carries no JSON API and no new Gantt(...) call.

Demo: https://toclocoinc.github.io/lattice-grid-demo-htmx-gantt/
Code: https://github.com/toclocoinc/lattice-grid-demo-htmx-gantt

How it works:

• The server renders an ordinary task table (id, name, phase, start, end, % done) inside <div data-lattice-gantt>. With JS off you still get a readable table full of tasks. With JS on, the Lattice htmx module turns it into a task grid and timeline on htmx:load.
• Project switch: a plain hx-get returns a new table fragment, and the old Gantt is cleaned up on htmx:beforeCleanupElement before the new one is built.
• Server-side change: "Server slips one task" returns a single <tr data-lattice-row="P3.1" hx-swap-oob="true">. Only that task's bar moves, and zoom, scroll and collapsed phases stay put.
• Saving edits: dragging a bar fires a bubbling lattice:gantt-change event, so hx-trigger="lattice:gantt-change" plus hx-post is the whole save path. The server answers with a line of HTML.
• Back button: zoom, scroll and collapsed rows ride along in htmx's history snapshot.

GitHub Pages is static, so the demo uses a small in-browser stand-in that answers htmx's requests from route handlers in src/server.js. They have the same shape as Django, Rails, Go or Laravel handlers (take params, return HTML), so you can see exactly what a real backend would send.

It's plain JS with no build step, about 150 lines of wiring plus the data.

It's free for non-commercial and local dev.

https://www.latticegrid.dev/