A simple </> htmx extension for preserving attributes while swaping content with hx-swap="outerHTML".
May be useful if you work with alpine.js..
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>
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent