| Attribute | Description |
|---|---|
hx-boost |
progressively enhances anchors and forms to use AJAX requests |
hx-confirm |
shows a confim() 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-encoding |
changes the request encoding type |
hx-ext |
extensions to use for this element |
hx-get |
issues a GET to the specified URL |
hx-headers |
adds to the headers that will be submitted with the request |
hx-history-elt |
the element to snapshot and restore during history navigation |
hx-include |
includes additional data in AJAX requests |
hx-indicator |
the element to put the htmx-request class on during the AJAX request |
hx-params |
filters the parameters that will be submitted with a request |
hx-patch |
issues a PATCH to the specified URL |
hx-post |
issues a POST to the specified URL |
hx-preserve |
preserves an element between requests |
hx-prompt |
shows a prompt before submitting a request |
hx-push-url |
pushes the URL into the location bar, creating a new history entry |
hx-put |
issues a PUT to the specified URL |
hx-request |
configures various aspects of the request |
hx-select |
selects a subset of the server response to process |
hx-sse |
establishes and listens to SSE sources for events |
hx-swap-oob |
marks content in a response as being "Out of Band", i.e. swapped somewhere other than the target |
hx-swap |
controls how the response content is swapped into the DOM (e.g. 'outerHTML' or 'beforeEnd') |
hx-target |
specifies the target element to be swapped |
hx-trigger |
specifies the event that triggers the request |
hx-vals |
adds to the parameters that will be submitted with the request |
hx-ws |
establishes a WebSocket or sends information to one |
| Class | Description |
|---|---|
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-added |
Applied to a new piece of content before it is swapped, removed after it is settled. |
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. |
| Header | Description |
|---|---|
HX-Boosted |
indicates that the request is via an element using hx-boost |
HX-Current-URL |
the current URL of the browser |
HX-History-Restore-Request |
true if the request is for history restoration after a miss in the local history cache |
HX-Prompt |
the user response to an hx-prompt |
HX-Request |
always true |
HX-Target |
the id of the target element if it exists |
HX-Trigger-Name |
the name of the triggered element if it exists |
HX-Trigger |
the id of the triggered element if it exists |
| Header | Description |
|---|---|
HX-Push |
pushes a new url into the history stack |
HX-Redirect |
can be used to do a client-side redirect to a new location |
HX-Refresh |
if set to "true" the client side will do a a full refresh of the page |
HX-Trigger |
allows you to trigger client side events, see the documentation for more info |
HX-Trigger-After-Settle |
allows you to trigger client side events, see the documentation for more info |
HX-Trigger-After-Swap |
allows you to trigger client side events, see the documentation for more info |
| Event | Description |
|---|---|
htmx:afterOnLoad |
triggered after an AJAX request has completed processing a successful response |
htmx:afterProcessNode |
triggered after htmx has initialized a node |
htmx:afterRequest |
triggered after an AJAX request has completed |
htmx:afterSettle |
triggered after the DOM has settled |
htmx:afterSwap |
triggered after new content has been swapped in |
htmx:beforeOnLoad |
triggered before any response processing occurs |
htmx:beforeProcessNode |
triggered before htmx initializes a node |
htmx:beforeRequest |
triggered before an AJAX request is made |
htmx:beforeSwap |
triggered before a swap is done, allows you to configure the swap |
htmx:beforeSend |
triggered just before an ajax request is sent |
htmx:configRequest |
triggered before the request, allows you to customize parameters, headers |
htmx:historyCacheError |
triggered on an error during cache writing |
htmx:historyCacheMiss |
triggered on a cache miss in the history subsystem |
htmx:historyCacheMissError |
triggered on a unsuccessful remote retrieval |
htmx:historyCacheMissLoad |
triggered on a succesful remote retrieval |
htmx:historyRestore |
triggered when htmx handles a history restoration action |
htmx:beforeHistorySave |
triggered before content is saved to the history cache |
htmx:load |
triggered when new content is added to the DOM |
htmx:noSSESourceError |
triggered when an element refers to a SSE event in its trigger, but no parent SSE source has been defined |
htmx:onLoadError |
triggered when an exception occurs during the onLoad handling in htmx |
htmx:oobErrorNoTarget |
triggered when an out of band element does not have a matching ID in the current DOM |
htmx:prompt |
triggered after a prompt is shown |
htmx:pushedIntoHistory |
triggered after an url is pushed into history |
htmx:responseError |
triggered when an HTTP response error (non-200 or 300 response code) occurs |
htmx:sendError |
triggered when a network error prevents an HTTP request from happening |
htmx:sseError |
triggered when an error occurs with a SSE source |
htmx:swapError |
triggered when an error occurs during the swap phase |
htmx:targetError |
triggered when an invalid target is specified |
htmx:validation:validate |
triggered before an element is validated |
htmx:validation:failed |
triggered when an element fails validation |
htmx:validation:halted |
triggered when a request is halted due to validation errors |
htmx:xhr:abort |
triggered when an ajax request aborts |
htmx:xhr:loadend |
triggered when an ajax request ends |
htmx:xhr:loadstart |
triggered when an ajax request starts |
htmx:xhr:progress |
triggered periodically during an ajax request that supports progress events |
| Method | Description |
|---|---|
htmx.addClass() |
Adds a class to the given element |
htmx.ajax() |
Issues an htmx-style ajax request |
htmx.closest() |
Finds the closest parent to the given element matching the selector |
htmx.config |
A property that holds the current htmx config object |
htmx.createEventSource |
A property holding the function to create SSE EventSource objects for htmx |
htmx.createWebSocket |
A property holding the function to create WebSocket objects for htmx |
htmx.defineExtension() |
Defines an htmx extension |
htmx.find() |
Finds a single element matching the selector |
htmx.findAll() htmx.findAll(elt, selector) |
Finds all elements matching a given selector |
htmx.logAll() |
Installs a logger that will log all htmx events |
htmx.logger |
A property set to the current logger (default is null) |
htmx.off() |
Removes an event listener from the given element |
htmx.on() |
Creates an event listener on the given element, returning it |
htmx.onLoad() |
Adds a callback handler for the htmx:load event |
htmx.parseInterval() |
Parses an interval declaration into a millisecond value |
htmx.process() |
Processes the given element and its children, hooking up any htmx behavior |
htmx.remove() |
Removes the given element |
htmx.removeClass() |
Removes a class from the given element |
htmx.removeExtension() |
Removes an htmx extension |
htmx.takeClass() |
Takes a class from other elements for the given element |
htmx.toggleClass() |
Toggles a class from the given element |
htmx.trigger() |
Triggers an event on an element |
htmx.values() |
Returns the input values associated with the given element |