Guestbook
Leave a note. Everyone sees it. The list refreshes on its own, so keep the page open and watch others write.
Nobody has written anything yet. Be the first.
Last 30 messages, kept for a day. One message every 20 seconds per browser. Be nice.
What to look at
The list polls with hx-trigger="every 5s", and swaps with hx-swap="innerMorph". A morph compares the new HTML with what is already there and only touches what changed. Existing messages keep their DOM nodes, so text you have selected stays selected, and nothing flickers.
Posting returns the new list for #messages, plus the form again as an oob swap. That is how the form empties after a post, and how the error message shows up when you post too fast.
The form is outside the polled element, so the poll can never wipe out what you are typing.
The counter under the input is Alpine, x-model on the input and x-text on the span. The server never hears about it.