HTMX might be all you need

For backend developers like me, the frontend ecosystem seems too much bloated, or at least, too much to take if we just want to have a frontend for our small application with a little interactivity on the front. A solution to this, is to simply say no to JS frameworks, and work with hypermedia served from your backend, introducing HTMX.

I have heard about it a while back, but I didn’t give it much attention. I didn’t realize the potential upside of not having to build a JS framework to introduce complexity in my app. Back then, I was working almost exclusively with python and especially Django, which is a framework that combines very well with HTMX. Since most tutorials on Django makes you work with the Django templating engine, to introduce interactivity without JS thanks to HTMX is very much straightforward. But how does it work exactly ?

HTMX is a lightweight JavaScript library that allows you to enhance your HTML by adding dynamic behavior. It works through HTTP and the concept of hypermedia. Instead of building a separate API or relying on complex frontend frameworks, HTMX enables you to use existing HTML markup and sprinkle it with additional attributes to bring interactivity to your web application. Some people even claims these additional properties could be part of HTML standards, that is to say, how useful they are.

Basically, the core idea behind HTMX is that your server is going to send a fully rendered component to your client to replace or enrich some part of your HTML. Of course, in practice it is a bit more complex and allow you to do advanced tricks. But in practice, the most important properties are hx-get, hx-post, hx-patch, and hx-delete, as they allow you to trigger an HTTP call to get the content which will replace a defined target in your HTML.

HTMX also supports additional attributes like hx-trigger, which allows you to define the events that trigger the HTTP requests, and hx-swap, which specifies how the response should be inserted into the page. With these attributes, you have fine-grained control over the behavior of your interactive elements.

Another noteworthy feature of HTMX is its ability to handle graceful degradation. If JavaScript is disabled in the user’s browser, HTMX gracefully falls back to traditional form submissions and page reloads. This ensures that your application remains functional even in non-JavaScript environments.

There is actually a Django extension called django-htmx to integrate HTMX directly in the python framework, which is one of the nicest combination with the frontend library imho.