Update another region out of band

Most HTMX requests update one target. An out-of-band swap lets one response update a second region too.

Say adding a task replaces the form, but the task count in the header must change at the same time. Return both fragments in one response:

<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 processes the normal swap first. Then it looks for elements marked with hx-swap-oob. It finds the existing element with the same id and replaces it. The OOB fragment does not stay inside the form HTML.

The attribute can also name a swap style and selector when you need more control. The default true form is enough when you replace a stable element by ID.

Watch parsing context. Table rows are tricky. Browsers discard invalid markup before HTMX sees it. For <tr> updates, use the wrapping pattern from the HTMX docs, often a <template>, so the row survives parsing.

OOB swaps work well for a small number of consequences from one action: a count, a flash message, a badge. If one response tries to patch six unrelated regions, your page boundaries are probably too fragmented. Consider returning a larger authoritative fragment instead.

The server builds one HTML document with two jobs. The main fragment replaces the form. The OOB fragment is extracted before insertion, so it never appears nested inside the form in the live DOM.

Try it on a task form. Add a task, inspect the response body, and confirm both the form and #task-count update from a single POST. If the count does not change, check that the OOB element’s id matches an element already on the page. Duplicate IDs on the page will make HTMX pick the wrong target.