Reference
Contents
- htmx Core Attributes
- htmx Additional Attributes
- htmx CSS Classes
- htmx Request Headers
- htmx Response Headers
- htmx Events
- htmx Extensions
- JavaScript API
- Configuration Options
Core Attribute Reference
The most common attributes when using htmx.
| Attribute | Description |
|---|---|
hx-get | issues a GET to the specified URL |
hx-post | issues a POST to the specified URL |
hx-on* | handle events with inline scripts on elements |
hx-push-url | push a URL into the browser location bar to create history |
hx-select | select content to swap in from a response |
hx-select-oob | select content to swap in from a response, somewhere other than the target (out of band) |
hx-swap | controls how content will swap in (outerHTML, beforeend, afterend, …) |
hx-swap-oob | mark element to swap in from a response (out of band) |
hx-partial | server-driven multi-target swap; wraps content to be swapped into one or more targets after the main swap |
hx-target | specifies the target element to be swapped |
hx-trigger | specifies the event that triggers the request |
hx-vals | add values to submit with the request (JSON format) |
Additional Attribute Reference
All other attributes available in htmx.
| Attribute | Description |
|---|---|
hx-boost | add progressive enhancement for links and forms |
hx-confirm | shows a confirm() dialog before issuing a request |
hx-delete | issues a DELETE to the specified URL |
hx-disable | disables htmx processing for the given node and any children nodes |
hx-disabled-elt | adds the disabled attribute to the specified elements while a request is in flight |
hx-disinherit | control and disable automatic attribute inheritance for child nodes |
hx-encoding | changes the request encoding type |
hx-ext | extensions to use for this element |
hx-headers | adds to the headers that will be submitted with the request |
hx-history | prevent sensitive data being saved to the history cache |
hx-history-elt | the element to snapshot and restore during history navigation |
hx-include | include additional data in requests |
hx-indicator | the element to put the htmx-request class on during the request |
hx-inherit | control and enable automatic attribute inheritance for child nodes if it has been disabled by default |
hx-params | filters the parameters that will be submitted with a request |
hx-patch | issues a PATCH to the specified URL |
hx-preserve | specifies elements to keep unchanged between requests |
hx-prompt | shows a prompt() before submitting a request |
hx-put | issues a PUT to the specified URL |
hx-replace-url | replace the URL in the browser location bar |
hx-request | configures various aspects of the request |
hx-sync | control how requests made by different elements are synchronized |
hx-validate | force elements to validate themselves before a request |
hx-vars | adds values dynamically to the parameters to submit with the request (deprecated, please use hx-vals) |
CSS Class Reference
| Class | Description |
|---|---|
htmx-added | Applied to a new piece of content before it is swapped, removed after it is settled. |
htmx-indicator | A dynamically generated class that will toggle visible (opacity:1) when a htmx-request class is present |
htmx-request | Applied to either the element or the element specified with hx-indicator while a request is ongoing |
htmx-settling | Applied to a target after content is swapped, removed after it is settled. The duration can be modified via hx-swap. |
htmx-swapping | Applied to a target before any content is swapped, removed after it is swapped. The duration can be modified via hx-swap. |