When starting to try htmx, It felt nice that we can interact and replace one area with response. As I started to build something practical, the need for updating multiple elements on response increased.

Htmx has an attribute hx-swap-oob which helps to achieve exactly this. (OOB - out of bound)

For an html section like this

<body>
    <div id="main-info">
    </div>
    <div>
        Some content here
    </div>
    <div id="extra-info">
    </div>
    <button hx-get="/get-update" hx-target="#main-info" hx-swap="outerHTML"> update </button>
</body>

On clicking update I want 2 elements #main-info and #extra-info to be updated. Also, in some cases #extra-info can be absent. You can achieve this in one simple step

  1. Setup /get-update endpoint to return the following html
<div id="main-info">
    Main information
    <p>This is main info</p>
</div>
<div id="extra-info" hx-swap-oob="true">
    <p>Additional info 1</p>
    <p>Additional info 2</p>
</div>

Notice that #extra-info has an attribute hx-swap-oob="true". This will signal htmx to replace #extra-info as well.

Here, the button element has the logic to issue get request to /get-update endpoint and replace #main-info’s outerHTML with html response.

When server response contains an element with attribute hx-swap-oob="true". HTMX will find the matching element ( with the id ) and replace the outerHTML ( default ) with the block.

This approach is very useful because in most of our usecases, an interaction can result in multiple elements being updated with the data from the server.