AHA demos
← All demos

Counter

One number, stored in a database, shared by everyone who visits this page. This is the app built in the tutorial.

11

Sure?

What to look at

Each button has a single hx-post attribute. The server runs one SQL statement and returns a <span> with hx-swap-oob. htmx finds the element with the same id on the page and replaces it.

The Reset button never talks to the server until you confirm. That "am I confirming?" state lives in Alpine's x-data.

Read the full walkthrough: A little example and Adding Alpine.

Source

Loading source…

Every file of this demo, as it runs. Or browse it on GitHub ↗