Core attributes are the primary way to use htmx. They allow you to issue AJAX requests and update parts of your page declaratively.
| Attribute | Description | Example |
|---|---|---|
hx-get |
Issues a GET request to the specified URL and swaps the response into the target element. | <button hx-get="/hello">Say Hello</button> |
hx-post |
Issues a POST request to the specified URL and swaps the response into the target element. | <form hx-post="/submit">...</form> |
hx-put |
Issues a PUT request to the specified URL and swaps the response into the target element. | <button hx-put="/update">Update</button> |
hx-delete |
Issues a DELETE request to the specified URL and swaps the response into the target element. | <button hx-delete="/delete">Delete</button> |
hx-patch |
Issues a PATCH request to the specified URL and swaps the response into the target element. | <button hx-patch="/patch">Patch</button> |
hx-target |
Specifies the element to swap the response into. Can be a CSS selector or this for the current element. |
<button hx-get="/hello" hx-target="#result">Say Hello</button> |
hx-swap |
Controls how the response is swapped into the target element (e.g., innerHTML, outerHTML, beforeend, etc.). |
<div hx-get="/msg" hx-swap="outerHTML">...</div> |
hx-trigger |
Specifies the event(s) that trigger the request (e.g., click, change, load, or custom events). |
<input hx-get="/search" hx-trigger="keyup changed delay:500ms"> |
hx-vals |
Specifies additional parameters to submit with the request, as a JSON object or a JavaScript expression. | <button hx-post="/vote" hx-vals='{"option":"A"}'>Vote A</button> |
hx-include |
Specifies additional elements whose values should be included in the request. | <button hx-post="/submit" hx-include="#other-input">Submit</button> |
hx-params |
Controls which parameters are submitted with the request (e.g., none, not, or a space-separated list). |
<form hx-post="/submit" hx-params="not password">...</form> |
hx-headers |
Specifies additional headers to send with the request, as a JSON object or JavaScript expression. | <button hx-get="/data" hx-headers='{"X-API-Key":"123"}'>Get Data</button> |
hx-push-url |
Pushes the request URL into the browser history (or replaces it) when the request completes. | <a hx-get="/page2" hx-push-url="true">Next Page</a> |
hx-select |
Specifies a CSS selector to select a portion of the response to swap into the target. | <div hx-get="/fragment" hx-select="#main">...</div> |
hx-confirm |
Shows a confirmation dialog before issuing the request. If the user cancels, the request is not sent. | <button hx-delete="/item" hx-confirm="Are you sure?">Delete</button> |
hx-disable |
Disables the element while the request is in flight. | <button hx-post="/submit" hx-disable>Submit</button> |
hx-indicator |
Specifies an element to show while the request is in flight (e.g., a loading spinner). | <button hx-get="/data" hx-indicator="#spinner">Load</button> |
hx-encoding |
Specifies the encoding type for the request (e.g., multipart/form-data for file uploads). |
<form hx-post="/upload" hx-encoding="multipart/form-data">...</form> |
hx-ext |
Enables one or more htmx extensions for the element. | <div hx-ext="debug">...</div> |