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?
Explore Topics
#Htmx#HtmxCheatSheet#WebDevelopment#Beginner#BasicAttributes#SwapStrategies#CoreAttributes#FormsLoadingIndicators#CheatSheet#SkillVeris
