What is HTMX
The last 2 weeks I have been exploring HTMX, a light-weight, front-end library that looks to bring the needs of a modern web app back to just HTML. While HTMX is written in JavaScript, using HTMX doesn't require you to write a line of JavaScript to create a fully fleshed, interactive front end. HTMX uses custom HTML attributes to allow any HTML element to perform AJAX requests, manipulate the DOM, trigger CSS transitions and animations, and handle WebSocket events. The key difference between a site running HTMX and a site running another front-end library React is ironically the server. HTMX relies on HTML responses from the server rather than JSON or any other data. HTMX allows you to take the HTML response from the server and insert or replace the element anywhere in the DOM. This means the dynamic parts of the view need to be generated by your server rather than the client.
The 4 "Whys" of HTMX
HTMX's inception was based on 4 questions that address problems with bare HTML as basis for modern web applications. HTMX provides solutions to these 4 questions. But first lets look at the HTML <a> element. You use this element to get some HTML from a server and render it, replacing the DOM with the new HTML. An <a> tag in bare HTML would look something like this:
<a href="/blog">Link to Blog</a>
HTTP Requests
Why should <a> and <form> tags be the only tags to make HTTP requests?
Modern web apps use AJAX requests to send and receive information from the different parts of the app. So why should <a> and <form> tags be the only elements that can perform these important actions. HTMX allows all elements to perform AJAX request using custom hx attributes. So we can take our <a> tag from earlier and turn it into a button that does the same thing.
<button hx-get="/blogs">Click to go to Blog!</button>
Triggers
Why should only click and submit events trigger AJAX requests?
Since only <a> and <form> can perform AJAX request in bare HTML, only click and submit events can trigger them. With HTMX events like mouse over, key presses, change can trigger AJAX requests. HTMX also has special events that can trigger element requests like load, revealed, and polling with hx-trigger. HTMX triggers can also include modifiers that can delay, throttle, and prevent multiple triggers. We can get the HTML from "/blogs" when hovering over a div instead of clicking a button.
<div
hx-get="/blog"
hx-trigger="mouseover"
>
Hover to see the blog!
</div>
Verbs
Why should only _GET and POST methods be available?
Generally in bare HTML, <a> tags perform GET requests and <form> tags perform POST requests. With HTMX you can use any element to perform any request type.
| Attribute | Verb |
|---|---|
hx-post |
POST |
hx-patch |
PATCH |
hx-get |
GET |
hx-delete |
DELETE |
hx-put |
PUT |
Replacement
Why should you only be able to replace the entire screen?
When you receive HTML from a server when working with bare HTML, the response data replaces the entire DOM. HTMX allows you to insert or replace elements anywhere in the DOM. This allows server responses to to respond with a single HTML snippet rather than an entire page, HTMX can dynamically add, subtract or replace elements as needed to form the page from the snippets provided by the server. Elements can be targeted with CSS selectors and extended syntax that allow you to define the target easily. Keywords like closest and next allow you to avoid coming up with endless class names by targeting an element by referencing its relative position. The way to swap or insert can be defined with the hx-swap attribute. With this we can render the a list of blog posts in a div dynamically, adding new posts to the top of a container div with each button press.
<div class="blogs-container"><!--- Blogs Go Here ---></div>
<button
hx-get="/blog"
hx-target=".blogs-container"
hx-swap="afterbegin"
>
GET BLOG!
</button>
Final thoughts
I find HTMX to be a very appealing technology. It is a very light, independent library. I think relying on the back-end to handle data and front-end to simply render and ask for changes falls more in line with the spirit of REST and simplifying the front-end back to HTML and CSS is something I find quite novel in this era of web development. There is increased risk of XSS attacks if HTMX is not implemented and sanitized correctly, and it feels a bit sacrilegious to use JavaScript as the server with Node and remove the JavaScript from the front end with HTMX. Overall I am planning and excited to use HTMX in the future. If you are also interested in trying HTMX, see their great docs to get started. Good luck and happy coding!
Top comments (1)
I agree it is pretty exciting that libraries such as HTMX are becoming more popular and people are starting to share this knowledge widely. I think one of the main reasons why this is happening is that HTMX is designed to be easy to learn, especially for those already familiar with HTML. Its syntax and concepts are straightforward, focusing on enhancing standard HTML behavior rather than replacing it with a complex JavaScript framework. This low learning curve means that developers can start using HTMX effectively after a short period of acclimation, integrating it into their projects without a steep learning curve. Additionally, HTMX has solid documentation and community resources that provide clear examples and guides, further reducing the barrier to entry for new users.
The low learning curve and lightweight nature make it highly cost-efficient for web development. Projects can be completed faster and with fewer resources, as there’s less code to write, test, and maintain. Because it’s easy to learn, teams leveraging HTMX can be more flexible – developers can contribute to front-end development without needing deep expertise in complex JS frameworks.
So it is likely that we start reading more articles with more and more exciting updates about HTMX and other dependency-free JavaScript libraries. I highly recommend this article from Facundo Corradini, a Senior Developer, who shares his experience with HTMX. He also provides a brief comparison with other JavaScript libraries: scalablepath.com/front-end/htmx