Add htmx to an Enhance Project
You can include htmx in your Enhance frontend with 2 lines of code.
First, (assuming you have an existing Enhance project) install htmx:
npm install htmx.org
I like being able to source external libraries from npm so I can specify a version and have it available locally to my project.
Tell Enhance to "bundle" htmx from node_modules as "my-htmx" (pick whatever name you'd like) in your
@bundles my-htmx './node_modules/htmx.org/dist/htmx.js'
head.mjs with this src:
htmx will now be available on each page and to all custom elements!
This example link will send a POST to
/click (which we can define in
app/api/click.mjs) and replace it's own contents with the response.
<a hx-post="/click">Click me!</a>
I've got the source for a full demo with htmx set up, a custom element, and an API route available on GitHub.