Contents

Attribute Reference

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-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-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-replace-url replace the URL in the location bar
hx-request configures various aspects of the request
hx-select selects a subset of the server response to process
hx-select-oob selects one or more elements from a server response to swap in via an out of band swap
hx-sse has been moved to an extension. Documentation for older versions
hx-swap controls how the response content is swapped into the DOM (e.g. 'outerHTML' or 'beforeEnd')
hx-swap-oob marks content in a response as being "Out of Band", i.e. swapped somewhere other than the target
hx-sync controls requests made by different elements are synchronized with one another
hx-target specifies the target element to be swapped
hx-trigger specifies the event that triggers the request
hx-vals adds JSON-formatted values to the parameters that will be submitted with the request
hx-validate allows you to enable HTML5-style validation for requests by non-form elements
hx-vars adds calculated values to the parameters that will be submitted with the request (deprecated)
hx-ws has been moved to an extension. Documentation for older versions

CSS Class Reference

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.

HTTP Header Reference

Request Headers Reference

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

Response Headers Reference

Header Description
HX-Push-Url pushes a new url into the history stack
HX-Replace-Url replaces the current URL in the location bar
HX-Redirect can be used to do a client-side redirect to a new location
HX-Location Allows you to do a client-side redirect that does not do a full page reload
HX-Refresh if set to "true" the client side will do a a full refresh of the page
HX-Retarget A CSS selector that updates the target of the content update to a different element on the page
HX-Reswap Allows you to specify how the response will be swapped. See hx-swap for possible values
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 Reference

Event Description
htmx:abort send this event to an element to abort a request
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:oobAfterSwap triggered after an of band element as been swapped in
htmx:oobBeforeSwap triggered before an out of band element swap is done, allows you to configure the swap
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:timeout triggered when a request timeout occurs
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

JS API Reference

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