Build confidence with HTMX's hypermedia-driven vocabulary — request attributes, swap strategies, triggers, and out-of-band updates.
0 / 5 completed
1 / 5
During a PR review, a colleague questions using hx-swap="outerHTML" instead of the default. What is the default hx-swap value and what does it do?
The default hx-swap is innerHTML, which replaces the content inside the target element. outerHTML replaces the element itself, which is useful for list items.
2 / 5
In a standup, a teammate wants a button to load content into a different element (not the button itself). You explain they need hx-target. What does hx-target do?
hx-target accepts a CSS selector (e.g. #results) and redirects the swap to that element instead of the element that triggered the request.
3 / 5
A design review proposes using out-of-band swaps to update a notification badge when a form submits. What is an out-of-band swap in HTMX?
Out-of-band swaps let you update multiple page regions in one response. Include elements with hx-swap-oob="true" and matching id attributes; HTMX swaps them in addition to the main target.
4 / 5
In a code review, a search input uses hx-trigger="keyup changed delay:500ms". A colleague asks what delay:500ms adds to the trigger. The answer is:
delay:500ms is an HTMX debounce modifier. The request is sent only after the event stops firing for 500 ms — ideal for search inputs to avoid flooding the server on every keystroke.
5 / 5
During a platform review, the team debates whether to use hx-push-url on a filtered list page. A senior engineer asks what hx-push-url does. The correct answer is:
hx-push-url calls history.pushState() after a successful swap, updating the browser URL. This makes HTMX-driven navigation feel like a normal page change and supports the back button.