Small demos of the AHA stack
18 small apps. Astro renders the HTML. htmx talks to the server. Alpine handles the UI bits. No build step for the frontend, no JSON API.
Start here
Counter
The example from the tutorial. Server-side state, oob swaps, an Alpine confirmation.
Active search
Search as you type, with a debounce and a loading indicator. The server returns rows of HTML.
Todos
Add, toggle, delete. Double-click to edit inline. Your list is private to your browser.
Inline form validation
Each field is checked on the server as you leave it. Error messages are just HTML.
Loading content
Lazy loading
Skeletons first, real numbers from the npm registry a moment later. The fetch happens in the Worker.
Infinite scroll
Programming languages by year, ten at a time. The last row loads the next page when it scrolls into view.
Sortable table
Click a header to sort. hx-select pulls the table out of the full page. The URL and back button keep up.
Tabs
Panels come from the server on click. Alpine remembers which tab is active.
Live data
Who's online
A count of browsers on the page, polled every 3 seconds. Open a second browser and watch it change.
Progress bar
A slow job on the server, polled until done. Reload halfway and it picks up where it was.
Guestbook
Leave a note for everyone. The list refreshes with a morph swap, so nothing flickers.
Optimistic like button
The heart fills instantly. The server confirms a moment later and has the final word.
Forms and dialogs
Modal dialog
A form loaded into a native dialog. The server closes it with a response header when the save succeeds.
Cascading selects
Pick a country, get its cities from the server. The dependent dropdown in one attribute.
Bulk actions
Select rows, then mark or delete them all at once. hx-include gathers the checkboxes.
Error handling
Where a response lands depends on its status code. hx-status, response events and a timeout.
Everything else
Read how these work on ahastack.dev. The code for every demo is on GitHub. Building with an AI agent? There's a skill for that.