Controls Gallery
Live Demo1. Button Variants
Click any button — each POSTs to the server and the response shows which variant was clicked.
2. Control Kinds
Each kind uses a different mechanism: HTMX request, HyperScript, or plain navigation.
3. Resource Actions
ResourceActions() factory. Edit swaps to a form, Delete removes with confirmation, Undo restores.
Hypermedia Widget
A server-driven UI component
4. Form Actions
FormActions() factory. Save submits via the parent form's hx-post. Cancel navigates away.
5. Empty State Action
EmptyStateAction() pattern. Click to create items, Reset clears.
No items yet.
6. Error Status
404 Not Found (closable):
Something went wrong
- Status
- 404 Page not found
- Route
- /example/missing
- Request ID
req-abc-123
500 Internal Error:
Something went wrong
- Status
- 500 Internal server error
- Route
- /api/data
- Request ID
req-def-456
7. Error Controls
404 Not Found controls (Back + Go Home):
500 Internal Error controls (Retry + Dismiss):
8. Navigation
9. Filter Fields
Adjust any filter to see results update live. Each field fires hx-get with hx-include to send all field values.
10. Live Demo
11. Row Actions (Edit / Delete)
RowActions() factory. Edit swaps the row to an inline form, Delete removes with hx-confirm.
| Name | Category | Price | Status | Actions |
|---|---|---|---|---|
| Example Item | Electronics | $99.99 | Active |
12. Row Form Actions (Save / Cancel)
RowFormActions() factory. Save sends hx-put with hx-include="closest tr". Cancel restores the view row.
| Name | Category | Price | Active | Actions |
|---|---|---|---|---|
13. HATEOAS Error Recovery
Each scenario returns an error panel with embedded recovery controls — the server tells the client exactly how to fix each problem. This is the power of HATEOAS: the API response itself contains the next possible actions.
A. Transient Failure (500)
Odd attempts fail, even attempts succeed. Click Retry inside the error panel to try again.
B. Validation Error (422)
Bad data triggers 422. The error panel includes a pre-filled fix form so you can correct values and resubmit without leaving the page.
C. Conflict (409)
Name already exists. The error panel offers two paths: Update Existing or Create as Copy.
D. Stale Data (412)
Version mismatch — someone else edited the record. The error panel lets you Refresh (get latest) or Force Save (overwrite).
E. Dependency Block (409)
Can't delete a category with items. The error panel lists dependent items and offers Reassign & Delete or Force Delete.
14. Breadcrumb Origin Tracking
Links carry a ?from=N bitmask that tells the destination page where the user came from. The server resolves the mask to a breadcrumb trail, derives intermediate crumbs from the URL path, and renders the bar between the navbar and content. No client state needed.
| Bit | Value | Label | Href |
|---|---|---|---|
| 0 | 1 | Home | / |
| 1 | 2 | Dashboard | /dashboard |
from=3 = bits 0+1 = Home + Dashboard. The destination page appends path-derived crumbs automatically. Click to see real breadcrumbs:
Use FromNav(href, from) to forward the param on outbound links. Use SetPageLabel(c, name) to replace the terminal crumb's auto-generated label with a human name (e.g., a person's name instead of their ID).