htmx Cheat Sheet

htmx is a small (~14 KB gzipped) JavaScript library that lets you build interactive web UIs using HTML attributes instead of writing JavaScript. You add attributes like hx-get, hx-target, and hx-swap to ordinary HTML elements; htmx intercepts events, sends AJAX requests, and swaps server-returned HTML fragments into the DOM. The result is an SPA-like experience driven entirely by your server-rendered HTML.

Both issue AJAX requests when an element is triggered, but they use different HTTP methods. hx-get sends a GET request (idempotent, no body, parameters appended to the URL) — use it for fetching data, navigating, or refreshing a fragment. hx-post sends a POST request (non-idempotent, parameters in the body) — use it for forms, mutations, and any action that creates or modifies data. htmx also supports hx-put, hx-patch, and hx-delete for the corresponding REST verbs.

Mostly yes, but there are a few breaking changes. htmx 2.0 (released 2024) dropped IE11 support, removed the legacy hx-vars attribute (use hx-vals with the js: prefix instead), and split the single hx-on attribute into one attribute per event (e.g., hx-on:click, hx-on:htmx:after-request). It also tightened defaults — for example, non-anchor elements no longer get an implicit GET when only hx-* attributes are present. Most existing 1.x apps work without changes; check the official 2.0 migration guide for the full list.

The default trigger depends on the element: click for buttons and most elements, submit for forms, change for inputs and selects. You can override it with any DOM event name (keyup, change, focus, mouseenter, etc.) or htmx synthetic events (load, revealed, intersect). Add modifiers like 'changed' (only fire when value changes), 'delay:300ms' (debounce), 'throttle:500ms' (rate limit), 'from:#other' (listen on a different element), or 'every 5s' (polling). For search-as-you-type, the canonical pattern is hx-trigger="keyup changed delay:300ms".

hx-target selects which element receives the response (a CSS selector, or relative selectors like 'closest tr', 'find .body', 'next', 'previous'). hx-swap controls how the response is placed relative to the target — innerHTML replaces contents, outerHTML replaces the whole element, beforeend appends inside, beforebegin inserts before the element, delete removes the target, and none fires events without swapping. Used together they give you precise control over where and how content updates.

The server can include HX-* headers in the response to control client-side behavior without writing JavaScript. HX-Trigger fires a client-side event (or events with detail data via JSON), HX-Redirect performs a full-page redirect, HX-Location performs a client-side htmx redirect, HX-Refresh reloads the page, HX-Push-Url updates browser history, and HX-Reswap/HX-Retarget/HX-Reselect override the swap configuration for that response. They're the bridge between your server logic and the htmx client.

Yes. This cheat sheet is a static reference rendered from a local dataset using client-side JavaScript only. No attribute names, search queries, or copied snippets ever leave your browser, and no analytics are tied to specific entries. The page works offline once loaded, so you can bookmark it as a permanent reference even on air-gapped machines.