htmx Cheat Sheet

A reference for htmx attributes like hx-get, hx-trigger, and hx-swap for building dynamic UIs with server-rendered HTML fragments.

1 PageBeginnerMar 5, 2026

Basic Attributes

Issuing requests on load, click, and input events.

html

<!-- Fetch content and replace this element's contents --><div hx-get="/api/messages" hx-trigger="load">  Loading...</div><button hx-post="/api/like" hx-target="#like-count" hx-swap="innerHTML">  Like</button><input hx-get="/search" hx-trigger="keyup changed delay:300ms" hx-target="#results" />

Swap Strategies

How hx-swap controls where the response HTML is inserted.

html

<div hx-get="/item" hx-swap="innerHTML">...</div>   <!-- default: replace inner content --><div hx-get="/item" hx-swap="outerHTML">...</div>   <!-- replace the whole element --><div hx-get="/item" hx-swap="beforeend">...</div>   <!-- append inside, at the end --><div hx-get="/item" hx-swap="afterbegin">...</div>  <!-- prepend inside, at the start --><div hx-get="/item" hx-swap="none">...</div>        <!-- don't swap anything -->

Core Attributes

The attribute vocabulary that drives most htmx interactions.

hx-get / hx-post / hx-put / hx-delete- issue an AJAX request of that HTTP method to a URL
hx-trigger- specifies the event that triggers the request (click, load, keyup, revealed, etc.)
hx-target- CSS selector for the element that receives the swapped response
hx-swap- how the response HTML is inserted relative to the target
hx-indicator- CSS selector of an element to show while the request is in flight
hx-vals / hx-include- add extra parameters to the request, e.g. values from other form fields
hx-boost- progressively enhances normal <a>/<form> elements to use AJAX instead of full page loads
hx-swap-oob- marks a piece of the response to be swapped into a different part of the page (out of band)

Forms & Loading Indicators

Submitting a form via AJAX and showing a spinner while it loads.

html

<form hx-post="/comments" hx-target="#comment-list" hx-swap="afterbegin" hx-indicator="#spinner">  <input name="body" />  <button type="submit">Post</button>  <img id="spinner" class="htmx-indicator" src="/spinner.gif" /></form>

Pro Tip

The server must respond with HTML fragments, not JSON -- htmx swaps whatever HTML comes back directly into the DOM, so design backend endpoints to render partial templates for each interaction rather than a JSON API.

Was this cheat sheet helpful?

Alpine.js Cheat Sheet

Bootstrap Cheat Sheet