Attributes
Requests
hx-getIssues a GET request to the specified URL | Issues a GET request to the specified URL |
hx-postIssues a POST request to the specified URL | Issues a POST request to the specified URL |
hx-putIssues a PUT request to the specified URL | Issues a PUT request to the specified URL |
hx-patchIssues a PATCH request to the specified URL | Issues a PATCH request to the specified URL |
hx-deleteIssues a DELETE request to the specified URL | Issues a DELETE request to the specified URL |
Request Control
hx-triggerControls when the element issues a request | Controls when the element issues a request |
hx-swapControls how the response is inserted | Controls how the response is inserted |
hx-targetControls where the response is inserted | Controls where the response is inserted |
hx-selectControls which part of the response to insert | Controls which part of the response to insert |
hx-swap-oobMarks response elements to swap into the page by ID | Marks response elements to swap into the page by ID |
hx-select-oobPicks response elements to swap into the page by ID | Picks response elements to swap into the page by ID |
hx-confirmShows a confirmation dialog before the request | Shows a confirmation dialog before the request |
Scripting
hx-onRuns inline JavaScript when an event fires | Runs inline JavaScript when an event fires |
Data
hx-valsAdds values to request parameters | Adds values to request parameters |
hx-includeIncludes additional element values in the request | Includes additional element values in the request |
hx-headersAdds custom headers to the request | Adds custom headers to the request |
hx-encodingSets the request encoding type | Sets the request encoding type |
History
hx-push-urlPushes the URL into browser history | Pushes the URL into browser history |
hx-replace-urlReplaces the current URL in browser history | Replaces the current URL in browser history |
hx-history-eltMarks the element to swap on history restore | Marks the element to swap on history restore |
Enhancements
hx-boostConverts links and forms to AJAX | Converts links and forms to AJAX |
hx-preloadPreloads content before the user triggers a request | Preloads content before the user triggers a request |
hx-optimisticShows optimistic content during the request | Shows optimistic content during the request |
Advanced
hx-indicatorSpecifies the loading indicator element | Specifies the loading indicator element |
hx-statusHandles responses differently by status code | Handles responses differently by status code |
hx-syncSynchronizes requests between elements | Synchronizes requests between elements |
hx-validateValidates before submitting the request | Validates before submitting the request |
hx-disableDisables elements during the request | Disables elements during the request |
hx-ignoreDisables htmx processing for the element | Disables htmx processing for the element |
hx-preservePreserves the element during swaps | Preserves the element during swaps |
hx-actionSpecifies the URL to receive the request | Specifies the URL to receive the request |
hx-methodSpecifies the HTTP method for the request | Specifies the HTTP method for the request |
hx-configConfigures request behavior with JSON | Configures request behavior with JSON |
Headers
Request
HX-RequestIndicates a request was made by htmx | Indicates a request was made by htmx |
HX-Request-TypeIndicates if this is a partial or full page request | Indicates if this is a partial or full page request |
HX-Current-URLContains the URL of the browser when the request was made | Contains the URL of the browser when the request was made |
HX-SourceIdentifies the element that triggered the request | Identifies the element that triggered the request |
HX-TargetThe element that will receive the response | The element that will receive the response |
HX-BoostedIndicates a boosted navigation request | Indicates a boosted navigation request |
HX-History-Restore-RequestIndicates history navigation (back/forward) | Indicates history navigation (back/forward) |
Last-Event-IDLast received SSE event ID for reconnection | Last received SSE event ID for reconnection |
Response
HX-TriggerTrigger client-side events from the server | Trigger client-side events from the server |
HX-LocationClient-side AJAX navigation to a new URL | Client-side AJAX navigation to a new URL |
HX-RedirectClient-side redirect to a new URL | Client-side redirect to a new URL |
HX-RefreshTrigger a full page reload | Trigger a full page reload |
HX-RetargetOverride the swap target from the server | Override the swap target from the server |
HX-ReswapOverride the swap style from the server | Override the swap style from the server |
HX-ReselectOverride the content selection from the server | Override the content selection from the server |
HX-Replace-UrlReplace the current URL in the browser history | Replace the current URL in the browser history |
HX-Push-UrlPush a URL into the browser history stack | Push a URL into the browser history stack |
Events
htmx:config:requestConfigure request before it's sent | Configure request before it's sent |
htmx:before:requestImmediately before fetch is called | Immediately before fetch is called |
htmx:after:requestAfter response is received | After response is received |
htmx:finally:requestAt the end of request lifecycle | At the end of request lifecycle |
htmx:before:swapBefore content is swapped into DOM | Before content is swapped into DOM |
htmx:after:swapAfter content is swapped into DOM | After content is swapped into DOM |
htmx:before:cleanupBefore htmx removes element data | Before htmx removes element data |
htmx:after:cleanupAfter listeners and data are removed | After listeners and data are removed |
htmx:confirmShow confirmation dialog before request | Show confirmation dialog before request |
htmx:errorWhen an error occurs during request | When an error occurs during request |
htmx:abortTrigger to abort an ongoing request | Trigger to abort an ongoing request |
htmx:before:initBefore a specific element is initialized | Before a specific element is initialized |
htmx:after:initAfter an element is fully initialized | After an element is fully initialized |
htmx:before:processBefore htmx processes a DOM node | Before htmx processes a DOM node |
htmx:after:processAfter htmx processes a DOM node | After htmx processes a DOM node |
htmx:process:{type}Custom template processing | Custom template processing |
htmx:after:implicitInheritanceAfter implicit inheritance is applied | After implicit inheritance is applied |
htmx:before:history:updateBefore browser history is updated | Before browser history is updated |
htmx:after:history:updateAfter browser history is updated | After browser history is updated |
htmx:after:history:pushAfter a push state action | After a push state action |
htmx:after:history:replaceAfter a replace state action | After a replace state action |
htmx:before:history:restoreBefore restoring from history | Before restoring from history |
htmx:before:viewTransitionBefore View Transition API starts | Before View Transition API starts |
htmx:after:viewTransitionAfter View Transition completes | After View Transition completes |
loadFired immediately after initialization | Fired immediately after initialization |
intersectElement enters viewport | Element enters viewport |
everyPeriodic polling trigger | Periodic polling trigger |
htmx:before:responseAfter a response is received but before the body is consumed | After a response is received but before the body is consumed |
htmx:before:settleBefore the settle phase begins after a swap | Before the settle phase begins after a swap |
htmx:after:settleAfter the settle phase completes | After the settle phase completes |
htmx:response:errorWhen an HTTP error status (4xx/5xx) is received | When an HTTP error status (4xx/5xx) is received |
Config
htmx.configConfigure htmx behavior globally | Configure htmx behavior globally |
htmx.config.defaultSwapDefault swap style for responses | Default swap style for responses |
htmx.config.defaultTimeoutDefault timeout for requests in milliseconds | Default timeout for requests in milliseconds |
htmx.config.extensionsComma-separated list of extensions to load | Comma-separated list of extensions to load |
htmx.config.historyControl htmx browser history management | Control htmx browser history management |
htmx.config.implicitInheritanceEnable implicit attribute inheritance | Enable implicit attribute inheritance |
htmx.config.includeIndicatorCSSInclude default indicator CSS | Include default indicator CSS |
htmx.config.indicatorClassCSS class for loading indicators | CSS class for loading indicators |
htmx.config.logAllLog all htmx events to console | Log all htmx events to console |
htmx.config.modeSet request mode for fetch API | Set request mode for fetch API |
htmx.config.morphIgnoreAttribute name prefixes to preserve during morphing | Attribute name prefixes to preserve during morphing |
htmx.config.morphSkipSkip morphing for specific elements | Skip morphing for specific elements |
htmx.config.morphSkipChildrenSkip morphing children of specific elements | Skip morphing children of specific elements |
htmx.config.noSwapHTTP status codes that skip swap | HTTP status codes that skip swap |
htmx.config.prefixSet a secondary attribute prefix | Set a secondary attribute prefix |
htmx.config.requestClassCSS class applied during requests | CSS class applied during requests |
htmx.config.transitionsEnable View Transitions API support | Enable View Transitions API support |
htmx.versionCurrent htmx version (read-only) | Current htmx version (read-only) |
htmx.config.defaultFocusScrollScroll to the focused element after a swap | Scroll to the focused element after a swap |
htmx.config.defaultSettleDelayDelay between the swap and settle phases in milliseconds | Delay between the swap and settle phases in milliseconds |
htmx.config.inlineScriptNonceNonce value added to inline scripts generated by htmx | Nonce value added to inline scripts generated by htmx |
htmx.config.morphScanLimitMaximum number of siblings scanned when matching elements during morphing | Maximum number of siblings scanned when matching elements during morphing |
htmx.config.metaCharacterCustom character used instead of `:` for attribute modifiers | Custom character used instead of `:` for attribute modifiers |
htmx.config.defaultSwapEmptyWhether an empty response body performs the main swap | Whether an empty response body performs the main swap |
Methods
htmx.ajax()Issues an htmx-style ajax request | Issues an htmx-style ajax request |
htmx.find()Find first matching element | Find first matching element |
htmx.findAll()Find all matching elements | Find all matching elements |
htmx.on()Listen for htmx events | Listen for htmx events |
htmx.onLoad()Execute callback when elements are loaded | Execute callback when elements are loaded |
htmx.parseInterval()Parse time intervals to milliseconds | Parse time intervals to milliseconds |
htmx.process()Process htmx attributes on element | Process htmx attributes on element |
htmx.registerExtension()Register htmx extension | Register htmx extension |
htmx.timeout()Create a timeout promise | Create a timeout promise |
htmx.trigger()Trigger custom events | Trigger custom events |
htmx.swap()Perform an HTML content swap into the DOM | Perform an HTML content swap into the DOM |
Tags
<hx-partial>Target multiple elements from a single response | Target multiple elements from a single response |