State Patterns
← OverviewDemonstrates: like, toggle, load, reveal, show/hide.
Like Counter
hx-post increments the counter server-side; the returned fragment replaces the entire button+counter unit.
0 likes
Toggle State
Flip a boolean on the server. The returned fragment reflects the new state.
OFF
Show / Hide
Pure HyperScript — no server round-trip. toggle .hidden on the target element.
Revealed! This panel was toggled client-side by HyperScript with zero server requests.
Auto-Load
hx-trigger="load" fires immediately after the element is added to the DOM.
Loading panel…
Lazy Reveal (intersect)
hx-trigger="intersect once" fires when the element enters the viewport.
Waiting for scroll…
Like
POST /state/likeServer increments counter; returns updated button fragment.
Toggle
POST /state/toggleServer flips bool; returns updated toggle fragment.
Show/Hide
(client only)HyperScript toggle .hidden — no HTTP request.
Load
GET /state/panel on loadhx-trigger="load" fetches on DOM insertion.
Reveal
GET /state/panel on intersecthx-trigger="intersect once" lazy-loads on scroll.