htmx-toast

Showcase for the htmx notification extension.

1. Click to edit with server notification

Classic htmx example (click-to-edit) with a simulated server using sinon.fakeServer. On save, the server response includes an HX-Trigger header with an hx-toast event, which the extension automatically turns into a notification — no hx-toast attribute needed on the button.

2. HX-Toast / HX-Trigger headers

The simulated server can notify the client by returning special headers in the response, without touching the HTML.

3. hx-toast / hx-toast-fail attributes

/demo/save is simulated by the server and responds 200 OK, showing the success notification. /demo/save-error is simulated to respond 500, showing the failure notification.

4. JavaScript API — htmx.toast(...)

5. Custom / persistent timeout

6. Notifications with an action

7. Rich HTML in the message

8. Multiple notifications / notification stack

Notifications appear at the top-center of the screen and stack downward. Once at least one notification is visible, a "dismiss all" button (trash icon) appears above the stack — hover over it to see the tooltip, or click it to dismiss every visible notification at once.