This is the official community extensions repository for htmx 4.
These extensions are managed by htmx team, but are not part of the core htmx extension set.
The htmx core extensions can be found alongside htmx releases in the /ext directory.
| Extension | Description |
|---|---|
| alpine-morph-swap | Uses Alpine.js morph plugin as the swap mechanism to preserve Alpine state |
| class-tools | Add, remove, or toggle CSS classes on elements to enable CSS transitions |
| client-side-templates | Transform JSON/XML responses into HTML via client-side templates before swapping |
| debug | Logs all htmx events to the console |
| event-header | Adds a Triggering-Event header containing a JSON representation of the triggering event |
| json-enc | Encodes request parameters as JSON instead of URL-encoded form data |
| loading-states | Manages loading states during requests by showing/hiding elements, toggling classes, and setting aria attributes |
| method-override | Converts non-GET/POST requests to POST with an X-HTTP-Method-Override header |
| morphdom-swap | Uses morphdom as the swap mechanism via hx-swap="morphdom" |
| multi-swap | Swap multiple elements from a single response using hx-swap="multi:..." |
| path-deps | Inter-element dependencies based on URL paths with automatic refresh on mutations |
| path-params | Populate {param} placeholders in URL paths using request parameters |
Via CDN (replace debug with the extension you want):
<script src="https://cdn.jsdelivr.net/npm/@bigskysoftware/htmx-4-community-extensions/src/debug/debug.js" defer></script>Or install via npm:
npm install @bigskysoftware/htmx-4-community-extensions
Each extension registers itself automatically when its script is loaded. See each extension's README for detailed usage and configuration.
For documentation on the htmx 4 extension API, event hooks, request context, and migration from htmx 2.x, see the htmx extensions documentation.
Open test/test.html in a browser to run the test suite.
