</> htmx

extensions

This site is a searchable collection of extensions for htmx 2.0. They are not guaranteed to work with the htmx 1.x codebase.

Core extensions are actively maintained by the htmx team.

Community extensions are contributed by the community or rarely touched by the htmx team (although they still work!)

Contributing

If you'd like to add your extension to this website, add a row to the table below in a PR against the /www/index.html file.

Core

Name	Description
sse	Provides support for Server Sent Events directly from HTML.
ws	Provides bi-directional communication with Web Sockets servers directly from HTML
head-support	Provides support for merging head tag information (styles, etc.) in htmx requests
idiomorph	Provides a `morph` swap strategy based on the idiomorph morphing library, which was created by the htmx team.
htmx-1-compat	Rolls back most of the behavioral changes of htmx 2 to the htmx 1 defaults.
preload	This extension allows you to load HTML fragments into your browser's cache before they are requested by the user, so that additional pages appear to users to load nearly instantaneously.
response-targets	This extension allows you to specify different target elements to be swapped when different HTTP response codes are received.

Community

Name	Description
ajax-header	Adds an `X-Requested-With` header to all requests made by htmx
alpine-morph	Alpine.js now has a lightweight morph plugin] and this extension allows you to use it as the swapping mechanism in htmx which is necessary to retain Alpine state when you have entire Alpine components swapped by htmx.
class-tools	The `class-tools` extension allows you to specify CSS classes that will be swapped onto or off of the elements by using a `classes` or `data-classes` attribute.
attribute-tools	The `attribute-tools` extension allows you to specify attributes that will be set or removed from elements by using an `attributes` or `data-attributes` attribute.
client-side-templates	This extension supports transforming a JSON/XML request response into HTML via a client-side template before it is swapped into the DOM.
debug	This extension includes log all htmx events for the element it is on, either through the `console.debug` function or through the `console.log` function with a `DEBUG:` prefix.
disable-element	This extension disables an element during an htmx request, when configured on the element triggering the request. Note that this functionality is now part of the core of htmx via the `hx-disabled-elt` attribute
event-header	This extension adds the `Triggering-Event` header to requests. The value of the header is a JSON serialized version of the event that triggered the request.
include-vals	The `include-vals` extension allows you to programmatically include values in a request with a `include-vals` attribute. The value of this attribute is one or more name/value pairs, which will be evaluated as the fields in a javascript object literal.
json-enc	This extension encodes parameters in JSON format instead of url format.
json-enc-custom	This extension works similarly to json-enc but allows for very complex structures, such as embedding JSON objects, lists, or handling indexes, just by using the name attribute.
loading-states	This extension allows you to easily manage loading states while a request is in flight, including disabling elements, and adding and removing CSS classes.
morphdom-swap	Provides a `morph` swap strategy based on the morphdom morphing library.
multi-swap	This extension allows you to swap multiple elements marked from the HTML response. You can also choose for each element which swap method should be used.
no-cache	This extension forces HTMX to bypass client caches and make a new request. An `hx-no-cache` header is also added to allow server-side caching to be bypassed.
path-deps	This extension supports expressing inter-element dependencies based on paths, inspired by the intercooler.js dependencies mechanism.
path-params	This extension uses request parameters to populate path variables. Used parameters are removed so they won't be sent in the query string or body anymore.
remove-me	Allows you to remove an element after a specified interval.
replace-params	This extension uses request parameters to replace existing parameters. If given value is empty string then parameter will be deleted. This extension would be usefull in situations like pagination, search that you only want to replace only few parameters instead of reset all parameters.
restored	Triggers an event whenever a back button even is detected while using `hx-boost`
safe-nonce	The `safe-nonce` extension can be used to improve the security of the application/web-site and help avoid XSS issues by allowing you to return known trusted inline scripts safely
The `safe-nonce` extension can be used to improve the security of the application/web-site and help avoid XSS issues by allowing you to return known trusted inline scripts safely Shoelace	Makes Shoelace elements work seamlessly (as possible) with htmx.
signalr	Provides bidirectional real-time communication via SignalR.