HTMX · _hyperscript

A small inbox, no JavaScript framework

Folders, search, and compose talk to the server with HTMX. Keys and the compose drawer are _hyperscript on this page. The mailbox is a cookie, so the toy runs with the Fly machines stopped and without Postgres.

Updating…

2 unread

Choose a note, or press j.

What this page uses

  • hx-get, hx-target, hx-swap — open a note and refresh the list
  • hx-trigger with keyup changed delay:200ms — search
  • hx-indicator — “Updating…” while the list refreshes
  • hx-swap-oob — unread count, and the list when the reading pane is the main target
  • hx-confirm and hx-delete — archive
  • Form post with a 422 markup response — compose validation
  • HX-Push-Url and HX-Trigger — address bar, and the closeCompose event
  • _ attribute — j / k / x / c from the window
  • htmx:afterSwap — put .is-selected back on the open row after the list is replaced