htmx
htmx Views: Grid, Kanban, Calendar, Gantt, Designer
An htmx data grid, Kanban board, Gantt chart, calendar and dashboard designer, all built from the HTML your server already renders. Declare a view with a data attribute, load one module, and htmx swaps, out-of-band updates and the Back button keep working. Each page below runs the whole loop live, with the server code printed next to it.
htmx data grid
A server-rendered table as a live grid. Edit a cell and post it, swap teams, and Back keeps the sort and draws the grid once.
htmx kanban board
A board built from a server table. Post each card move, let a workflow rule refuse a drop, patch one card out of band, and keep it on Back.
htmx Gantt chart
A task table wrapped in data-lattice-gantt. Swap projects, slip a task out of band, post every drag, and keep the zoom on Back.
htmx calendar
A calendar bound to a grid, and one built straight from a table. Post each dragged event with hx-post, patch one out of band, swap teams, and keep the view on Back.
htmx dashboard designer
The Designer from saved state, with Board, Calendar and Gantt widgets over a grid. Swap the source, post every edit, and Back restores the page.
How the htmx demos work
This site is static, so a small stand-in server runs in your browser. It answers htmx's requests to
/htmx-demo/ with HTML built from demo data, after a short delay so each swap is visible, and never
touches the network. On every page the route handlers it runs are printed beside the demo, together with the page markup, so a
developer can see exactly what their own server would return. The views come from
the grid engine, loaded as the htmx module described in the htmx guide.
Common questions
What does Lattice Grid do for an htmx app?
It turns the HTML your server already renders into live views: declare a table, a calendar, a Gantt or a Designer with data attributes and load one module. Each page in this section runs the whole loop live, with the server code printed beside it.
Do these demos need a server?
No: this site is static, so each demo runs a small stand-in server in your browser that answers htmx requests with HTML built from demo data. The route handlers it runs are printed on each page, so you can see what your own server would return.
Which htmx views are available?
The data grid, the Kanban board, the calendar, the Gantt chart and the dashboard Designer each have a live page here. The htmx guide covers the module they all share.
The core grid The Kanban board The Gantt chart The dashboard Designer $1,000 per domain