tangledgroup htmx 4.0
Overview
htmx is a lightweight JavaScript library that lets you access modern browser features (AJAX, WebSockets, SSE) directly from HTML using attributes like hx-get, hx-post, and hx-trigger. It follows the original web programming model: the server sends HTML in response to user actions, and htmx swaps that HTML into the DOM. This is called HATEOAS (Hypertext As The Engine Of Application State).
htmx 4.0 is a major release built on the fetch() API (replacing XMLHttpRequest), with explicit attribute inheritance, improved extension architecture based on event hooks, and enhanced swap strategies including morph-based updates via idiomorph.
Key characteristics:
- Single JavaScript file, no dependencies, no build step required
- ~14KB minified+gzipped
- HTML responses from the server (not JSON)
- Declarative — behavior lives in HTML attributes
- Progressive enhancement friendly
- Supports extensions for SSE, WebSockets, preload, and more
When to Use
- Building dynamic web interfaces without JavaScript frameworks
- Implementing AJAX requests declaratively from HTML
- Creating server-driven UIs where the server controls rendering
- Integrating WebSockets or Server-Sent Events with HTML
- Migrating from htmx 2.x to htmx 4.x
- Replacing JavaScript-heavy SPAs with hypermedia-driven architectures
- Adding interactivity to existing HTML pages with minimal code
Installation / Setup
htmx is a single JavaScript file with no dependencies. No build step required.
CDN (recommended for quick start)
<script src="https://cdn.jsdelivr.net/npm/htmx.org@4.0.0-beta2"
integrity="sha384-v+EMKtNUAo5enmQxBqgoU/FWvVvvZHvITNzurHSl4kzvCs94wdlgHUci1lliKWKz"
crossorigin="anonymous"></script>
ES Module
<script type="module" src="https://cdn.jsdelivr.net/npm/htmx.org@4.0.0-beta2/dist/htmx.esm.min.js"></script>
npm
npm install htmx.org@4.0.0-beta2
import 'htmx.org';
// or named import:
import htmx from 'htmx.org';
Self-hosted
Download htmx.min.js and include it in your <head>:
<script src="/js/htmx.min.js"></script>
htmax (bundled extensions)
The htmax.js file bundles htmx with the most popular extensions in a single file: SSE, WebSockets, preload, browser-indicator, download, optimistic, and targets. Extensions are automatically available without separate loading.
<script src="/js/htmax.min.js"></script>
Core Concepts
Hypermedia Controls
HTML has two native elements that issue HTTP requests: <a> (GET) and <form> (POST/GET). htmx generalizes this — any element can issue any type of HTTP request to any URL, triggered by any event, with the response placed anywhere in the DOM.
<button hx-post="/clicked" hx-target="#output" hx-swap="outerHTML">
Click Me
</button>
<output id="output"></output>
htmx expects HTML responses from the server, not JSON. The server controls what the user sees.
Attribute Inheritance (Explicit in 4.0)
In htmx 4.0, attribute inheritance is explicit by default using the :inherited modifier. This is a major change from htmx 2.x where inheritance was implicit.
<div hx-confirm:inherited="Are you sure?">
<button hx-delete="/account">Delete Account</button>
<button hx-put="/account">Update Account</button>
</div>
Request Lifecycle
- User triggers an event (click, input, etc.)
- htmx collects form data and parameters
- An AJAX request is issued via
fetch() - Server returns HTML
- htmx selects content from the response (
hx-select) - Content is swapped into the target (
hx-target,hx-swap) - CSS transitions are applied if element IDs are stable
Advanced Topics
Core Attributes Reference: All hx-* attributes with syntax and examples → Core Attributes
Response Headers: Server-controlled behavior via HX-* headers → Response Headers
Extensions System: SSE, WebSockets, preload, building custom extensions → Extensions
Migration from htmx 2.x: Breaking changes and upgrade guide → Migration Guide