Add HTMX to your project in seconds and build modern, dynamic web apps with simple HTML.
HTMX uses special hx-* attributes to add dynamic behavior to your HTML. Here are the most important ones:
| Attribute | Description | Example |
|---|---|---|
hx-get |
Performs a GET request to the specified URL when triggered. | <button hx-get="/hello" hx-target="#result">Say Hello</button> |
hx-post |
Performs a POST request to the specified URL when triggered. | <form hx-post="/submit" hx-target="#msg">...</form> |
hx-put |
Performs a PUT request to the specified URL when triggered. | <button hx-put="/update" hx-target="#item">Update</button> |
hx-delete |
Performs a DELETE request to the specified URL when triggered. | <button hx-delete="/delete/1" hx-target="#row-1">Delete</button> |
hx-target |
Specifies which element to update with the response. | <button hx-get="/hello" hx-target="#result">Say Hello</button> |
hx-trigger |
Specifies the event that triggers the request (e.g. click, change, every 2s). |
<input hx-get="/search" hx-trigger="keyup changed delay:300ms" hx-target="#results"> |
hx-swap |
Controls how the response is swapped into the target (innerHTML, outerHTML, beforeend, etc.). |
<button hx-get="/next" hx-target="#list" hx-swap="beforeend">Load More</button> |
hx-vals |
Specifies additional values to submit with the request (as JSON). | <button hx-post="/vote" hx-vals='{"option":"A"}'>Vote A</button> |
hx-headers |
Adds custom headers to the request. | <button hx-get="/data" hx-headers='{"X-API-Key":"123"}'>Fetch</button> |
HTMX supports many more attributes for advanced use cases, including hx-push-url, hx-select, hx-indicator, and more.
See the full documentation for details.