Htmx is a library that allows you to access modern browser features directly from HTML, rather than using javascript. It\’s actually built using javascript.
“The concept is, let’s use the original model of the web for building web apps, but let’s make HTML more powerful.”
– Carson Gross, creator of htmx
Gross also thinks that HTMX can reduce the complexity for many websites. There is a lot of Javascript code that is written, and with HTMX we can reduce that considerably.
It extends the core idea of HTML so that you can do much more with it. When used on server side you typically send back HTML and not JSON.
Frontend developers do not need to write JavaScript, when using HTMX. They can use additional attributes in HTML tags to achieve dynamic content and updates.
It\’s backend agnostic, so you can use your choice of programming language for backend like Java, Python, PHP etc.
Lets take an example
<a href=\"/about\">About</a>
When clicked this anchor tag will take you to the \”About\” page. It will issue an HTTP GET request and display the response.
Now consider
<button hx-post=\"/clicked\"
hx-trigger=\"click\"
hx-target=\"#parent-div\"
hx-swap=\"outerHTML\">
Click Me!
</button>
This tells htmx:
\”When a user clicks on this button, issue an HTTP POST request to \’/clicked\’ and use the content from the response to replace the element with the id parent-div in the DOM\”
The project documentation says that now
- Any element, not just anchors and forms, can issue an HTTP request.
- Any event, not just clicks or form submissions, can trigger requests.
- Any HTTP verb, not just GET and POST, can be used
- Any element, not just the entire window, can be the target for update by the request.