Dynamic content

HTMX: The Latest Trend in Web Development

HTMX (HyperText Markup eXtensions) is a library that makes it possible to send data via regular HTML and to update dynamic content on web pages without reloading the entire page.

What is HTMX? #

Anyone who has been following the news in the field of web development in the recent weeks and months will certainly have come across the term HTMX. This is a very compact JavaScript library that provides developers with various useful tools.

I've been looking into it over the last few weeks and would like to give an overview in this article about what HTMX is and what questions I've had about it.

Use of HTMX #

HTMX makes it possible to add so-called hx-tags to each HTML element, which control how the element should interact with data. For example:

<div hx-get="/interesting-content" hx-trigger="load, every 1s">
  Loading
</div>

There are two hx tags here: hx-get specifies the address to which the request should be sent, and hx-trigger defines when this should happen (on load and then every second). These tags are applied to a <div>-element, which would normally have no network functionality.

HTMX registers event handlers in the background that send AJAX requests and exchange the response from the server with the current content of the container.

Can I Use HTMX in Existing Pages? #

HTMX can be integrated very easily via a CDN link or a package manager such as npm or yarn. A quick look at the documentation may be helpful.

To extend an existing page with HTMX, the hx-boost tag can be used. Assuming that a page does not yet use HTMX and contains some links, the hx-boost tag can be attached to the very top container and all links and forms contained therein are boosted by passing it on.

<section id="News" hx-boost="true" hx-select="#News">
  <div class="content">
    ...
  </div>
  <nav class="pagination">
    <ul class="pagination-list">
      <li class="pagination-item">
        <a href="/news" class="active">1</a>
      </li>
      <li class="pagination-item">
        <a href="news/p2" class="">2</a>
      </li>
      <li class="pagination-item">
        <a href="news/p3" class="">3</a>
      </li>
      <li class="pagination-item">
        <a href="news/p4" class="">4</a>
      </li>
    </ul>
  </nav>
</section>

Here one can see a news list. It contains a container for the content and links for the various pages. When clicking on these pages, the entire page is normally reloaded. The hx-boost tag turns all requests used in the boosted container into AJAX requests, while the hx-select tag means that despite a response from the server containing the complete new page (not just the news list), only the news list is updated with the new content.

How to Make the Switch to HTMX? #

Developers often look for an answer on how to use HTMX as an alternative to other front-end frameworks such as React or Vue to create dynamic page content.

In most cases, pages created with these frameworks communicate with a back-end via an interface that returns data in a structured format, for example JSON or a GraphQL interface. This data is then passed to components that contain logic to display it in the browser.

Since HTMX inserts the responses from the server directly into the DOM, it does not work directly with such interfaces, so the responses must come from the server in HTML format.

HTMX with JSON APIs? #

What if you want to change the page to an HTMX page, but the API is not designed for it, or you are in the situation of building a page that connects to an API that is not in your own hands.

This is where the client-side-templates extension can be used. This extension makes it possible to add templates to elements that prepare the data received and transform it into HTML before it is added to the document.

How Do I Handle HTMX Requests on the Server Side? #

Last but not least, I would like to discuss the processing of HTMX requests in the back-end. HTMX headers, which are sent in the request, are very helpful here. I would once again like to use the page with the news section as an example. Previously, a request always sent back the entire page and the browser had to decide which elements from the DOM had to be replaced.

However, if a back-end is designed to handle HTMX requests, it can react to this and only deliver parts of the page when no more is needed.

A request sent via HTMX can contain several headers: HTMX Request Headers

First, we can read the header HX-Request="true" to see whether it is an HX request or a regular request. In the case of a regular request, the entire page is reported back as usual, so the page continues to work even if JavaScript has been deactivated on the client.

Further headers can help to decide which part of the page to report back. In this case we can use HX-Target, this header contains the target specified in the hx-tag. In this way, the back-end knows that it is an HX request with the target News and therefore only sends back the News section.

My Conclusion #

In my opinion, HTMX offers a very good way of making content on websites dynamic with little effort. I can highly recommend it for website projects, where React or Vue is usually not the best choice, but you still want dynamic content. Since such things are often a bit tricky to implement with JavaScript and AJAX and can this way be replaced by a simple hx-tag, you save a lot of effort here and get great results.

For me, HTMX is an interesting change of direction. In the past, applications were often built in this way: The client requests something, the server calculates and returns appropriate data. Later, things turned around and interfaces became very generic, the logic of displaying the data from the interfaces largely moved to the front-end. Now things are changing again and many developers seem to be returning to the original approach.

Hx tags make programming triggers and targets very easy. However, I would prefer it if there was a separation between the markup and the triggers. I would find it a good way to connect the tags to the elements via ids or classes, to separate the logic and styles from the markup in a similar way as used in CSS.

On htmx.org you can find a list of examples that show how HTMX can be used. You can also find some interesting use cases there!

If you have any questions or comments about this article, please let me know and I will try to answer them as soon as possible! I am curious if you have had any experience with projects using HTMX and what your opinions are!