Targets and swaps
Update another region out of band
Return a secondary fragment that updates a stable element outside the normal target.
8 minute lesson
An out-of-band swap lets one response update a second stable region in addition to the normal target.
Suppose adding a task replaces the form normally but must also update the count. The response can contain both fragments:
<form id="new-task" hx-post="/tasks" hx-swap="outerHTML">
<!-- cleared form -->
</form>
<span id="task-count" hx-swap-oob="true">3 tasks</span>
HTMX extracts the element marked hx-swap-oob, finds the existing element with the same ID, and replaces it outside the main target. The OOB element does not remain inside the form response.
The attribute can also specify another swap style and selector. Keep the default true form when replacing a stable element is enough.
Some elements need valid parsing context. For table rows, use the wrapping pattern documented for OOB swaps, often with <template>, so the browser does not discard the fragment before HTMX processes it.
Use OOB swaps for a small number of consequences from the same server action, such as a count and flash message. If one response updates many unrelated areas, your target boundary or page representation is probably too fragmented.
Lesson completed