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"></script>
  <script src="htmx-preserve-attr.js"></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:x-data="{ message: 'Hello World!' }"
hx-get="/new-element" 
hx-swap="outerHTML" 
hx-trigger="load">Old element</div>

And you should get the following output:

<div foo="bar" class="new-element" x-data="{ message: 'Hello World!' }" x-text="message">Hello World!</div>