tmk241/hemx
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(examples): add hemx html pattern gallery

Browse Source 
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
This commit is contained in:
slhx agent
2026-06-23 07:22:40 +02:00
parent f1d84e4837
commit b3d72e8d82
16 changed files with 764 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples/html_examples/README.md
+37
View File
@@ -0,0 +1,37 @@
# 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:
```sh
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.