Component Patterns

← Overview

Steps — Multi-step Wizard

Navigate a wizard with hx-get on Next/Prev buttons. Server tracks current step and returns the updated steps indicator + content via hx-target swap.

  • Details
  • Preferences
  • Review
  • Confirm

Step 1: Details

Enter your basic information. Name, email, and preferences.

Tabs — Lazy-loaded Content

Each tab button uses hx-get to fetch content on demand. Active class managed via HyperScript.

Loading…

Toast — OOB Notifications

Button posts an action; server returns a result fragment plus an OOB toast via hx-swap-oob. Toast auto-dismisses with HyperScript.

Click to trigger a toast notification.

Chat Bubbles — Message Append

Form uses hx-post with hx-swap="beforeend" to append messages. The server returns both user and bot bubbles.

Bot
Hello! How can I help you today?

Swap — Animated Toggle

Each button uses hx-post with hx-swap="outerHTML" to toggle state. Server returns the updated button reflecting new state.

Skeleton — Loading Placeholder

Button fires hx-get; server delays 1.5s to simulate load. DaisyUI skeleton classes show placeholders, then real content replaces them.

Timeline — Infinite Scroll

Sentinel div at the bottom uses hx-trigger="intersect once" to load more items. Each batch includes a new sentinel until all items are loaded.

  • Event 1
    Description for event 1
  • Event 2
    Description for event 2
  • Event 3
    Description for event 3
  • Event 4
    Description for event 4
  • Event 5
    Description for event 5
  • Loading more…

Drawer — On-demand Side Panel

Open button uses hx-get to load content into the drawer body. DaisyUI drawer toggled via checkbox + HyperScript.

Drawer content loads here…

Rating — Star Input

Each star radio uses hx-post with hx-vals to post the selected rating. Server stores it and returns the updated fragment.

No rating yet

Steps

GET /steps/:step

hx-get swaps wizard panel with updated step indicator and content.

Tabs

GET /tabs/:tab

hx-get lazy-loads tab content; HyperScript manages active class.

Toast

POST /toast

OOB swap injects toast notification that auto-dismisses.

Chat

POST /chat

hx-swap="beforeend" appends user + bot message bubbles.

Swap

POST /swap/like

hx-swap="outerHTML" toggles button state with icon change.

Skeleton

GET /skeleton/content

1.5s server delay shows skeleton placeholders, then real content.

Timeline

GET /timeline?after=N

hx-trigger="intersect once" loads batches on scroll.

Drawer

GET /drawer/content

hx-get loads drawer body on demand when opened.

Rating

POST /rating

hx-post with hx-vals sends star selection; server returns updated fragment.

Settings