Client Interactivity Demo
Nine widgets, zero JavaScript written. Everything you see below is HTMx + Alpine.js composed declaratively on top of server-rendered HTML.
Are you sure?
1. Optimistic Like
Alpine flips the heart immediately; HTMx posts and swaps the button with the server's truth.
show snippet
<button x-data="{ liked: false }"
@click="liked = !liked"
:class="liked && 'text-pink-500'"
hx-post="/demos/api/like"
hx-vals='{"liked": "false"}'
hx-swap="outerHTML">
♥ Like
</button>2. Live Debounced Search
hx-trigger="keyup changed delay:300ms" — one keystroke per request, server filters, fragment swaps.
Start typing to search 39 fruits.
3. Lazy-Loaded Tabs
Alpine tracks the active tab; HTMx fetches each tab's body on first visit and caches it locally.
4. Inline Edit
Click the text to edit. Enter saves, Esc cancels.
5. Toast Notifications
Server responses include an HX-Trigger header; Alpine listens for the event and spawns a toast.
6. Live Counter (Polling)
HTMx polls the server every 2 seconds. Toggle on/off via Alpine to start and stop.
refreshed at 11:48:35
7. Confirm-Dismiss
Alpine collapses the row, HTMx DELETEs after the transition completes.
- Approve invoice #4218
- Send weekly digest
- Re-run nightly backup
8. Modal With HTMx-Loaded Form
The form HTML is fetched by HTMx the first time the modal opens; Alpine handles open/close state.
Quick form
9. Live Bar Chart (SVG)
HTMx polls every 2 seconds; the server synthesizes a fresh 12-point window and renders SVG bars + sparkline. Hover a bar for its value.
show snippet
<div hx-get="/demos/api/chart"
hx-trigger="load, every 2s[this.dataset.live === 'true']"
hx-swap="innerHTML"></div>10. Users Table (CRUD)
Server-rendered datatable with sort, search, pagination, inline edit, status toggle, role select, delete with confirm, and add via modal.