hx-mirror
v1.0.6
Published
A lightweight HTMX extension for mirroring content: declaratively syncs an element's innerHTML to one or more targets using the hx-mirror attribute after HTMX swap events (htmx:afterSwap, htmx:oobAfterSwap).
Readme
hx-mirror
A lightweight HTMX extension for mirroring content: declaratively syncs an element’s innerHTML to one or more targets using the hx-mirror attribute after HTMX swap events (htmx:afterSwap, htmx:oobAfterSwap).
Notes: This extension requires htmx (included globally or imported as a module). This project is not an official htmx extension and is not affiliated with or endorsed by the htmx project.
Quick Start (Browser + CDN)
<!-- Load HTMX -->
<script src="https://unpkg.com/[email protected]"></script>
<!-- Load hx-mirror IIFE build -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/hx-mirror.iife.js"></script>Example
<body hx-ext="mirror">
<!-- Source element with hx-mirror attribute -->
<div id="source" hx-mirror="#target1, #target2" hx-get="simple-fragment.html" hx-trigger="load"></div>
<!-- Target elements to mirror the content into -->
<div id="target1"></div>
<div id="target2"></div>
</body>Usage
Add the hx-ext attribute to init extension (hx-ext="mirror"). Then use the hx-mirror attribute on any element and specify one or more CSS selectors to mirror its content to.
Which file should I use?
| File | Use case / Description | Auto-registers with htmx? | Add hx-ext="mirror" in HTML? |
| --------------------- | -------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------- | ------------------------------ |
| hx-mirror.iife.js | For direct use in the browser with a <script> tag (CDN/local). Works out of the box — just add hx-ext="mirror" to your HTML. | ✅ Yes | ✅ Yes |
| hx-mirror.esm.js | For modern JavaScript projects using ES Modules (import). Use with bundlers like Webpack, Vite, or Rollup. | ❌ No — call hxMirror(htmx) manually | ✅ Yes |
| hx-mirror.cjs.js | For Node.js or tools that use CommonJS (require()). Can also be used in older browser setups with a bundler that supports CJS. | ❌ No — call hxMirror(htmx) manually | ✅ Yes |
1. Using in the browser (no build tools)
<!-- Load HTMX -->
<script src="https://unpkg.com/[email protected]"></script>
<!-- Load hx-mirror IIFE build (versioned for stability) -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/hx-mirror.iife.js"></script>If you want to always get the latest (not recommended for production):
<script src="https://cdn.jsdelivr.net/npm/hx-mirror/dist/hx-mirror.iife.js"></script>2. Using with ES Modules / modern bundlers
import htmx from 'htmx.org';
import { hxMirror } from 'hx-mirror';
hxMirror(htmx);HTML still needs:
<body hx-ext="mirror">
...
</body>3. Using with CommonJS (require())
const htmx = require('htmx.org');
const { hxMirror } = require('hx-mirror/dist/hx-mirror.cjs.js');
// Register the extension with your htmx instance
hxMirror(htmx);HTML still needs:
<body hx-ext="mirror">
...
</body>Demos
npm i
npm run build
npm run serveThen go to: http://localhost:3000