htmx-preserve-attr

A simple </> htmx extension for preserving attributes while swaping content with hx-swap="outerHTML". May be useful if you work with alpine.js..

quick start

Include htmx-preserve-attr.js script in head tag after htmx initialization

<head>
  <script src="https://unpkg.com/htmx.org@latest" defer></script>
  <script src="htmx-preserve-attr.js" defer></script>
</head>

Add hx-ext="preserve-attr" to body tag.

<body hx-ext="preserve-attr">

For each attribute you want to preserve while swaping, add hx: as a prefix.. For example hx:foo="bar"

<div hx:foo="bar" hx-get="/new-element" hx-swap="outerHTML" hx-trigger="load">old element</div>

And you should get the following output:

<div foo="bar" class="something">new element</div>