liminfoHTMX Reference
Free reference guide: HTMX Reference
About HTMX Reference
The HTMX Reference is a searchable quick-reference for all HTMX HTML attributes. HTMX is a lightweight JavaScript library that allows you to add AJAX, CSS Transitions, WebSockets, and Server Sent Events directly in HTML using attributes, without writing JavaScript. This reference organizes the attributes into four categories — Requests, Triggers, Target/Swap, and Other — so developers can instantly find the attribute and syntax they need.
Frontend developers and full-stack engineers working with server-rendered HTML frameworks (Django, Rails, Laravel, FastAPI, or plain Node.js) use this reference to recall HTMX patterns such as hx-trigger with delay and changed modifiers for debounced search inputs, hx-swap="beforeend" for infinite scroll list appending, hx-push-url for SPA-style navigation, and hx-boost for progressively enhancing existing links and forms to use AJAX without changing their markup.
The reference covers all request methods (hx-get, hx-post, hx-put, hx-delete, hx-patch), all eight swap modes (innerHTML, outerHTML, beforebegin, afterbegin, beforeend, afterend, delete, none), polling triggers with "every Ns" syntax, and utility attributes like hx-indicator, hx-confirm, hx-vals, hx-headers, hx-ext, and hx-on. Each entry includes a minimal, working HTML example.
Key Features
- All five HTTP method attributes: hx-get, hx-post, hx-put, hx-delete, hx-patch with real HTML examples
- hx-trigger with modifiers: once, changed, delay:500ms, throttle, from, keyup, intersect, every Ns polling
- hx-swap modes: innerHTML, outerHTML, beforebegin, afterbegin, beforeend, afterend, delete, none with swap timing
- hx-target with CSS selector syntax and relative references (closest, find, next, previous)
- hx-select to extract specific elements from a server response for partial updates
- hx-boost for converting regular anchor and form elements to AJAX requests progressively
- Request customization: hx-vals for extra parameters, hx-headers for custom headers, hx-confirm for dialogs
- hx-push-url for browser history integration, hx-indicator for loading spinners, hx-ext for extensions
Frequently Asked Questions
What is HTMX and how is it different from React or Vue?
HTMX extends HTML with special hx-* attributes that issue AJAX requests and swap parts of the DOM with the server response — all declared in HTML without writing JavaScript. React and Vue are component-based JavaScript frameworks that manage state and rendering on the client. HTMX keeps state on the server and returns HTML fragments, making it ideal for server-rendered apps that want interactivity without a full SPA architecture.
How does hx-trigger work and what modifiers are available?
hx-trigger specifies the DOM event that initiates the request. By default it uses the natural event for the element (click for buttons, change for inputs). Modifiers refine behavior: changed only fires if the value changed, delay:500ms debounces the request, once fires only the first time, throttle:1s rate-limits repeated triggers, and every 2s creates a polling interval. Multiple triggers can be listed comma-separated.
What are all the available hx-swap values?
innerHTML (default) replaces the inner content of the target. outerHTML replaces the target element itself. beforebegin inserts before the target, afterbegin inserts as the first child, beforeend as the last child, and afterend after the target. delete removes the target entirely, and none discards the response without updating the DOM (useful for side-effect-only requests). You can also add swap:1s to animate the swap with a CSS transition delay.
How do I implement debounced search with HTMX?
Add hx-get="/search", hx-trigger="keyup changed delay:500ms", hx-target="#results" to the search input. The changed modifier ensures the request only fires when the value actually changes (not on arrow keys), and delay:500ms waits 500ms after the last keypress before sending — a classic debounce pattern. The server returns an HTML fragment and HTMX inserts it into #results.
What does hx-boost do?
hx-boost="true" on a parent element (like a nav) converts all child anchor links and form submissions into AJAX requests. The page body is swapped with the response body and the browser URL is updated via pushState — creating SPA-like navigation from regular HTML links without changing their href or action attributes. It degrades gracefully if JavaScript is disabled.
How do I send extra data or custom headers with HTMX requests?
Use hx-vals to include additional key-value pairs as JSON: hx-vals='{"csrf": "token123"}'. For HTTP headers use hx-headers: hx-headers='{"X-Custom-Header": "value"}'. Both accept JSON strings directly in the attribute or a JavaScript expression prefixed with js:. hx-vals values are merged with the form data or included as query parameters for GET requests.
How does hx-push-url enable browser back/forward navigation?
hx-push-url="true" pushes the request URL to the browser history stack after a successful response using the History API pushState. Users can then navigate back and forward as with normal page loads. Setting hx-push-url to a specific path like hx-push-url="/page/2" pushes that path instead of the actual request URL. Combined with hx-boost this creates full SPA-style navigation.
How do I show a loading spinner with HTMX?
Add hx-indicator="#spinner" to the element making the request, and set display:none on the #spinner element. HTMX automatically adds the htmx-request CSS class to the indicator element while a request is in flight and removes it when done. Style it with .htmx-request { display: block; } in your CSS. You can also use the htmx-request class on the triggering element itself to show inline loading states.