slhx agent
b3d72e8d82
Add examples/html_examples as a copy-pasteable gallery for the first htmx-style HTML UX patterns using exact htmx URL slugs in the page and README. The slice covers click-to-edit, edit-row, delete-row, inline-validation, click-to-load, and active-search with .heml templates, generated resources, server-owned Rust state, and runtime-free selector targeting. req: htmx_equivalents/001 req: htmx_equivalents/002 req: examples/001
hemx HTML examples
A copy-pasteable pattern gallery for the boring HTML UX patterns popularized by
htmx. The point is not to clone htmx attributes; it is to show the hemx idiom:
plain .heml, generated resources, server-owned Rust state, keyed partials, and
tiny runtime behavior. req: htmx_equivalents/001 req: htmx_equivalents/002 req: examples/001
Run it:
cargo run -p hemx-html-examples
Open http://127.0.0.1:3029.
Pattern matrix
Names match the htmx example URL slug exactly, e.g. modal-custom from
https://htmx.org/examples/modal-custom/. Rust resource names use normal
identifier spelling only where the language requires it.
| htmx example slug | hemx idiom | Proof anchor |
|---|---|---|
click-to-edit |
A read view and edit form are the same generated contact_card partial; the server toggles editing and returns gallery::contact_card.replace(...). |
templates/partials/contact_card.heml, contact_card_handlers::edit_contact, save_contact |
edit-row |
A table row is a keyed .heml partial with generated edit/save forms; no selector target strings. |
templates/partials/editable_row.heml, editable_row_handlers::edit_row, save_row |
delete-row |
Server state removes the row and returns gallery::editable_row.remove(id). |
editable_row_handlers::delete_row |
inline-validation |
A generated form reports field failure with validate_email_form.error(...), focuses the field, and updates status text. |
templates/gallery.heml, gallery_handlers::validate_email |
click-to-load |
The server owns the loaded count and returns generated keyed loaded_row replacements plus status text. |
gallery_handlers::load_more, LoadedRow |
active-search |
The search form posts a query; the server derives result rows and replaces generated search_result keyed partials. |
gallery_handlers::search, SearchResult |
Boundary
This gallery deliberately skips the trophy-list patterns that would need a real product reason or a browser/plugin policy first: drag-and-drop, modal libraries, file upload progress, infinite scroll, web components, and authentication token refresh. Add those only as vertical slices when hemx has a boring product-owned answer, not as demo-only JavaScript.