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.orgI 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 DynamoDB (11ms) to HTML (1.1ms) in 13ms