HTMX Guide
Core Attributes
| Attribute | Description |
|---|---|
| hx-get | Issue GET request |
| hx-post | Issue POST request |
| hx-put / hx-patch / hx-delete | Other HTTP methods |
| hx-trigger | What triggers the request (default: click) |
| hx-target | CSS selector for where to put response |
| hx-swap | How to insert: innerHTML, outerHTML, beforeend... |
| hx-include | Include values from other elements |
| hx-push-url | Push URL to browser history |
| hx-boost | Auto-ajax all links/forms |
| hx-indicator | Element to show while loading |
Examples
<!-- Click to load -->
<button hx-get="/api/users" hx-target="#list" hx-swap="innerHTML">
Load Users
</button>
<div id="list"></div>
<!-- Form submit -->
<form hx-post="/api/users" hx-target="#list" hx-swap="beforeend">
<input name="name" type="text">
<button type="submit">Add User</button>
</form>
<!-- Polling every 2s -->
<div hx-get="/api/status" hx-trigger="every 2s">...</div>
<!-- Delete with confirmation -->
<button hx-delete="/api/users/1"
hx-confirm="Delete this user?"
hx-target="#user-1"
hx-swap="outerHTML">Delete</button>
<!-- Infinite scroll -->
<tr hx-get="/api/users?page=2" hx-trigger="revealed" hx-swap="afterend">
Loading...
</tr>
hx-swap Values
| Value | Effect |
|---|---|
| innerHTML | Replace inner HTML (default) |
| outerHTML | Replace entire element |
| beforebegin | Before the element |
| afterbegin | First child |
| beforeend | Last child |
| afterend | After element |
| delete | Delete the element |
| none | No DOM change |