Reference

Attributes

Requests

• hx-get - issues GET request to specified URL
• hx-post - issues POST request to specified URL
• hx-put - issues PUT request to specified URL
• hx-patch - issues PATCH request to specified URL
• hx-delete - issues DELETE request to specified URL
• hx-query - issues QUERY request to specified URL

Request Control

• hx-trigger - controls when element issues requests
• hx-swap - controls how response is inserted
• hx-target - controls where response is inserted
• hx-select - controls which response part is inserted
• hx-swap-oob - marks response elements to swap into page by ID
• hx-select-oob - picks response elements to swap into page by ID
• hx-confirm - shows confirmation dialog before request

Scripting

• hx-on - runs inline JavaScript when event fires

Data

• hx-vals - adds values to request parameters
• hx-include - includes additional element values in request
• hx-headers - adds custom headers to request
• hx-encoding - sets request encoding type

History

• hx-push-url - pushes URL into browser history
• hx-replace-url - replaces current URL in browser history
• hx-history-elt - marks element to swap on history restore

Enhancements

• hx-boost - converts links and forms to AJAX
• hx-preload - preloads content before user triggers request
• hx-pending - shows custom content during requests

Advanced

• hx-indicator - specifies loading indicator element
• hx-status - handles responses differently by status code
• hx-sync - synchronizes requests between elements
• hx-validate - validates before submitting request
• hx-disable - disables elements during request
• hx-ignore - disables htmx processing for element
• hx-preserve - preserves element during swaps
• hx-morph-skip - freezes an element during a morph swap
• hx-morph-skip-children - morphs an element’s attributes but keeps its children
• hx-action - specifies URL to receive request
• hx-method - specifies HTTP method for request
• hx-config - configures request behavior

Headers

Request

• HX-Request - indicates request was made by htmx
• HX-Request-Type - indicates partial or full page request
• HX-Current-URL - contains browser URL when request started
• HX-Source - identifies element that triggered the request
• HX-Target - identifies element that will receive response
• HX-Boosted - indicates boosted navigation request
• HX-History-Restore-Request - indicates history navigation (back/forward)

Response

• HX-Trigger - triggers client-side events with htmx.trigger()
• HX-Location - redirect without a full page load
• HX-Redirect - redirects by setting location.href
• HX-Refresh - reloads page with location.reload()
• HX-Retarget - overrides swap target from server
• HX-Reswap - overrides swap style from server
• HX-Reselect - overrides content selection from server
• HX-Replace-Url - replaces current URL in browser history
• HX-Push-Url - pushes URL into browser history stack

Events

Request Lifecycle

• htmx:config:request - fires before request data is encoded
• htmx:confirm - fires before handling hx-confirm
• htmx:before:request - fires immediately before fetch()
• htmx:before:response - fires after fetch(), before response.text()
• htmx:after:request - fires after response.text()
• htmx:response:error - fires for HTTP status 400 or higher
• htmx:before:swap - fires before DOM update
• htmx:before:settle - fires after DOM insertion, before settle tasks
• htmx:after:settle - fires after settle tasks
• htmx:after:swap - fires after DOM update
• htmx:finally:swap - at the end of swap lifecycle
• htmx:finally:request - fires after lifecycle ends, including failures
• htmx:error - fires after request or swap exception
• htmx:abort - aborts in-flight request

Elements

• htmx:before:init - fires before element initialization
• htmx:after:init - fires after element initialization
• htmx:before:process - fires before DOM node processing
• htmx:after:process - fires after DOM node processing
• htmx:before:on:init - fires before htmx wires the hx-on attributes
• htmx:before:cleanup - fires before element data removal
• htmx:after:cleanup - fires after element data removal
• load - fires after element initialization

History Events

• htmx:before:history:update - fires before browser history update
• htmx:after:history:update - fires after browser history update
• htmx:after:history:push - fires after history push
• htmx:after:history:replace - fires after history replacement
• htmx:before:history:restore - fires before history restoration

View Transitions

• htmx:before:viewTransition - fires before view transition starts
• htmx:after:viewTransition - fires after view transition completes

Triggers

• intersect - fires when element enters viewport
• every - fires at each polling interval

Config

Core

• htmx.config - configures htmx behavior globally
• htmx.version - reports current htmx version (read-only)
• htmx.config.prefix - sets secondary attribute prefix
• htmx.config.metaCharacter - replaces : in attribute modifiers
• htmx.config.extensions - restricts extension registration by name

Request Settings

• htmx.config.defaultTimeout - sets default request timeout in ms
• htmx.config.mode - sets request mode for fetch()

Swaps

• htmx.config.defaultSwap - sets default swap style for responses
• htmx.config.allowEmptySwapAfterOOB - controls whether OOB swaps prevent empty main swaps
• htmx.config.noSwap - sets HTTP status codes that skip swap
• htmx.config.transitions - enables View Transitions API support
• htmx.config.defaultSettleDelay - sets swap-to-settle delay in ms
• htmx.config.defaultFocusScroll - scrolls to focused element after swap

Morphing

• htmx.config.morphIgnore - preserves attribute prefixes during morphing
• htmx.config.morphSkip - skips morphing for specific elements
• htmx.config.morphSkipChildren - skips morphing children of specific elements
• htmx.config.morphScanLimit - limits siblings scanned during morph matching

Indicators

• htmx.config.includeIndicatorCSS - includes built-in loading indicator CSS
• htmx.config.indicatorClass - sets class hidden by built-in indicator CSS
• htmx.config.requestClass - sets class applied during requests

Behavior

• htmx.config.history - controls htmx browser history management
• htmx.config.implicitInheritance - enables implicit attribute inheritance
• htmx.config.inlineScriptNonce - sets nonce on inline scripts generated by htmx
• htmx.config.logAll - logs all htmx events to console

Methods

Request Methods

• htmx.ajax() - issues an htmx request

DOM

• htmx.find() - finds first matching element
• htmx.findAll() - finds all matching elements
• htmx.process() - processes htmx attributes on element
• htmx.swap() - swaps HTML content
• htmx.initialize() - manually initializes htmx

Event Handling

• htmx.on() - listens for htmx events
• htmx.onLoad() - executes callback when elements load
• htmx.trigger() - triggers custom events

Extensions

• htmx.registerExtension() - registers htmx extension

Timing

• htmx.parseInterval() - parses time intervals to milliseconds
• htmx.timeout() - creates timeout Promise

Tags

• <hx-partial> - targets multiple elements with one response