The htmx cheat sheet you watch run. Pick a preset, see the real request and the DOM patch fire.
LIVE ELEMENT
EXTERNAL TARGET
REQUEST →
request headers
—
response headers
—
response body
—
PATCH →
—
hx-swap="innerHTML"
response body
—
DOM patch
—
hx-swap="outerHTML"
response body
—
DOM patch
—
Most htmx references are a wall of prose: a table of attribute names next to a
one-line description. You read that hx-swap="outerHTML" replaces the
whole element while innerHTML replaces its children, and then you go
write code hoping you remembered which is which. Swapscope turns that table into a
working instrument. Pick a preset, fire the demo element, and the real HTTP request
and the exact DOM nodes htmx swapped light up side by side.
Every value on the network panel comes from the actual request htmx made, read off
the XMLHttpRequest in its own lifecycle events. Nothing is faked. The
DOM patch panel then flash-highlights the precise node that changed, so the
difference between swap strategies is something you see happen rather than something
you infer from a paragraph.
Toggle hx-swap between innerHTML and outerHTML
and switch on compare mode to fire both at once. The two labs sit next to each other:
innerHTML keeps the button and replaces its label; outerHTML
replaces the whole button, which is why a real backend has to restate its own
hx-* attributes in the response or the element stops firing after the
first click. Swapscope reproduces that gotcha on a live element so you can watch it,
not just read about it. hx-target and hx-select presets show
where the response lands and how htmx filters a fragment before the swap.
The hx-trigger presets cover the three you reach for most:
click, revealed, and a click delay:500ms
modifier. Each one rewrites the attribute on the live element and reprocesses it, so
you can watch how a trigger modifier changes when the request actually goes out. Turn
on hx-indicator to see the loading state land and clear during that delay.
hx-* attributes,
Swapscope lets you click a preset and watch the request and DOM change it produces.
The attributes it covers are hx-get, hx-swap,
hx-trigger, hx-target, hx-select, and
hx-indicator.
innerHTML replaces the target element's children and keeps the element
itself; outerHTML replaces the entire element, including its tag and
attributes. Fire both in compare mode to see the DOM patch for each side by side.
hx-trigger preset to switch the live element between
click, revealed (fires when scrolled into view), and
click delay:500ms. The network panel shows exactly when each one sends
its request.