Todos

A todo list stored in D1. Add, check off, delete. Double-click a todo to edit it. The list is tied to a cookie, so it is yours alone.

What to look at

Adding returns one <li>, appended with hx-swap="beforeend". The response also carries a fresh, empty form as an oob swap, which is how the input gets cleared.

Toggle and edit return the same <li> again, swapped with hx-target="closest li" and outerHTML. Delete uses hx-swap="delete": the server returns nothing, htmx removes the element.

Edit mode is Alpine. Double-click flips editing, the text hides and an input shows. Escape or blur flips it back. When you press Enter, the form submits through htmx and the whole item is re-rendered from the server.

Every item is the same TodoItem.astro component, whether it renders on page load or inside a response.