HTMX Out-of-Band Swaps

OOB swaps allow you to update multiple parts of the page from a single response.

What are OOB Swaps?

Normally, HTMX swaps content into the element that triggered the request. OOB swaps let you update additional elements anywhere on the page.

Basic OOB Swap

<!-- This element will replace #notification wherever it exists -->
<div id="notification" hx-swap-oob="true">
  <p>Message sent successfully!</p>
</div>

Swap Strategies

Strategy	Description
true / outerHTML	Replace the entire element
innerHTML	Replace only the inner content
beforebegin	Insert before the element
afterend	Insert after the element
delete	Remove the element

SSE + OOB Example

// When a new message is added, update both the list and the count
export async function action(ctx) {
  const { content } = await ctx.json();
  ctx.db.run('INSERT INTO messages (content) VALUES (?)', [content]);
  
  // The SSE manager will send OOB swaps for:
  // - #message-list (new message)
  // - #message-count (updated count)
}