Alpine only
Four small things that never need the server. This whole page makes zero requests after it loads.
Password field
Character counter
characters left
Client-side list
Reload and it's gone. Nothing here is worth saving.
What to look at
Not everything needs a round trip. Whether a menu is open, whether a password is visible, how many characters are left: that is UI state, and Alpine is the right tool for it.
The rule of thumb: if the server would not care about the value, keep it in Alpine. If the server needs to know, send it with htmx. The last box is the edge case, a list nobody needs to remember. As soon as it should survive a reload, it moves to the server and becomes the todos demo.
x-transition, @click.outside, x-for, x-model, x-bind. Five directives cover most of what you will ever need.