Add htmx to an Enhance Project

htmx complements Enhance projects and vanilla web components very well.

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 .arc file:

@bundles
my-htmx './node_modules/htmx.org/dist/htmx.js'

Now htmx will be available as a Javascript module to the browser, so we can add a script tage to our head.mjs with this src: src="/_public/bundles/my-htmx.mjs".

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.

from Sanity.io (194.77ms) to HTML (14.12ms)