There's a new front-end tech that is making waves as htmx finished 2nd in the 2023 JavaScript Rising Stars "Front-end Frameworks" category, just behind React (htmx is a library, btw) and #10 overall!
After a quick review, I can see why. Below is a simple demo taken from their docs to show you how native this is to standard HTML.
See the following markup with an explanation of what it does.
<button hx-get="/demo/htmx-demo.html"
hx-trigger="click"
hx-target="#htmx-demo"
hx-swap="outerHTML"
>
Try the demo
</button>When a user clicks on this button, issue an HTTP GET request to ‘/demo/htmx-demo.html’ and use the content from the response to replace the element with the id "htmx-demo" in the DOM
What's great is that all you need to use this framework is a 48kb file (current version 1.9.10 as of this post).
<script src="/assets/js/htmx.1.9.10.js"></script>You can download the latest htmx file at unpkg.
The following HTTP request methods are available:
| Attribute | Description |
|---|---|
| hx-get | Issues a GET request to the given URL |
| hx-post | Issues a POST request to the given URL |
| hx-put | Issues a PUT request to the given URL |
| hx-patch | Issues a PATCH request to the given URL |
| hx-delete | Issues a DELETE request to the given URL |
I'm interested to use this more and see what it's like to live with. I really like the idea of leveraging modern capabilities of browsers instead of loading heavy frameworks on initial pageloads.