What are out-of-band swaps?

Summary

Elements in a response with hx-swap-oob (and an id) are taken out of the response and swapped into the page elements with the same id, in addition to the main swap. This updates several places from one request, such as a new row plus a counter in the header.

Longer Answer

Values: true (outerHTML on the element with the same id), innerHTML, or a style with a selector such as beforeend:#notifications. Table rows sent out of band must be wrapped in a <template>, because the HTML parser drops a <tr> outside a table. In htmx 2 OOB swaps run before the main swap; in htmx 4 after.

Code Example

<li>New task</li>
<span id="task-count" hx-swap-oob="true">8</span>

Key Points

• hx-swap-oob + id.
• Several updates from one response.
• Wrap table rows in <template>.
• Order changes in htmx 4.

Deep dive: htmx Tutorial: Out-of-Band Swaps