HTMX + Alpine.js + SSE

Interactive Components Guide

HTMX 2.0.8
Alpine.js 3.15.3
Tailwind CSS 4
DaisyUI 5.5.14
Go + Templ
View on GitHub

Toast Notifications (SSE)

Click a button to trigger a server-sent toast notification. The server pushes the message via SSE.

Broadcast mode: All connected clients see all toasts!

Modals

Basic Modal

Uses native HTML <dialog> element with DaisyUI styling.

Hello!

This is a basic modal using the native HTML dialog element.

Press ESC key or click the button below to close.

Confirmation Modal

Delete confirmation with HTMX form submission and loading indicator.

Confirm Delete

Are you sure you want to delete this item? This action cannot be undone.

Alpine.js Enhanced Modal

Focus trapping with x-trap, keyboard navigation, and smooth transitions.

Enhanced Modal

This modal has:

  • Focus trap - Tab key cycles within modal
  • Scroll lock - Body doesn't scroll when open
  • ESC to close - Keyboard accessible
  • Smooth animations - Scale and fade transitions
Try tabbing through these inputs:

Form Modal

HTMX form submission with SSE toast feedback.

Contact Form

Name
Email

Drawers

Right Drawer

Slides in from the right using modal-end. Has focus trap and smooth transitions.

Settings

Language

Left Navigation Drawer

Slides in from the left using modal-start. Typically used for navigation on mobile.

Navigation

Bottom Sheet Drawer

Slides up from the bottom using modal-bottom. Great for mobile action sheets.

Choose an Action

Inline HTMX Swap

Classic HTMX pattern: click a button, swap HTML content inline. No SSE needed.

Click the button to load a quote...

How It Works

HTMX

Handles HTTP requests and DOM updates with hx-post, hx-swap, and the SSE extension.

Alpine.js

Manages local UI state with x-trap for focus, x-transition for animations, and x-data for reactive state.

SSE

Server-Sent Events push notifications from server to browser. Simple text/event-stream endpoint.