Exploring Web Development: HTMX

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.

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!