Quick Links
The web development community has recently been abuzz with talk of htmx, but what is this exciting new technology? It turns out it’s a lot simpler than you might expect, but htmx’s usefulness may justify the hype.
What Is htmx?
htmx is a small JavaScript library with a narrow focus. It makes common JavaScript functionality available via HTML attributes. Here’s a simple example:
This code shows a custom HTML attribute,hx-get. If you click this link, the htmx library will send an AJAX request and load the target page without a full browser refresh.
htmx has additional functionality that lets you send requests:
Although htmx has support for technologies like CSS animation and WebSockets, its core aim is to simplify HTTP request handling.
How You Can Use htmx in a Simple Web App
htmx addresses specific functionality within web apps or websites, rather than the behavior of an entire app.
One big advantage of the library is how easy it is to start using. You can download and install a copy if you want, but since it has no dependencies, all you need to do to get started is add a link to the script on a CDN:
For local development and testing, you will need toset up a web server, like Apache, if you don’t already have one running. This is a requirement, even if you’re just experimenting with static files, because the file: protocol does not allow AJAX requests.
A Simple Example Using Infinite Scroll
You can download this simple example from itsGitHub repository.
Infinite scroll is a common techniquethat sites like Twitter use for their feed. When you reach the bottom of a list, infinite scroll loads more items for you to continue reading.
This feature naturally requires JavaScript to check the page scroll position and load the new items without refreshing the page. But htmx can do all this for you.
Take the following markup which represents a list of posts, using an image for each:
Imagine you have these items in a file,feed1.html, with more items infeed2.html, etc. Each page will then display one small subset of items that you may scroll within:
Now, you could use “next page” links to move from one page to another, but you can implement infinite scroll easily too. Just change the final item to:
Adding these four attributes to the final list item implements infinite scroll. Here’s what each attribute means:
hx-trigger
When this element first appears on screen…
feed2.html
… send a GET request to feed2.html, …
… select thelielements from the response, …
… and add them after this element.
As you scroll to the bottom of the list, notice how the page loads new content automatically. You can confirm this by observing the scrollbar and checking your browser’s developer tools:
Note that, with this simple static page setup, thefeed2.htmlpage includes a final item with anhx-getattribute set tofeed3.html, and so on. Also note how htmx has added a listener for the scroll event.
Other Potential Uses for htmx
You can use htmx for many other common interactions, including:
It’s possible to build each of these examples using standard JavaScript, htmx just makes the process much easier.
The Benefits and Drawbacks of htmx
htmx can vastly simplify common interactions that can benefit many web applications, and even many websites. It allows designers, and others working with front-end web pages, to add functionality without having to learn JavaScript.
By abstracting common behavior, htmx ensures consistency across your projects and between them. Infinite scroll will behave the same way from page to page, regardless of who implemented it.
Since it emphasizes a declarative (what) approach rather than an imperative (how) one, htmx functionality is typically easier to understand and reason about.
Although htmx can let you forget about JavaScript in many contexts, it cannot solve every problem for you! You’ll still need to write code to handle specific business logic and more low-level functionality.
Because htmx does a lot of work for you, there’s less potential for customizing behavior. This will often be a positive trade-off, but you’ll need to be prepared to hand off control.
html may let you avoid writing JavaScript, but you should still be aware that JavaScript code is running in the background. You might be tempted to use the hx-get attribute on every link, in place of anhrefattribute. But this introduces a dependency on JavaScript; if the code fails to run for whatever reason, your users will be left with a link that does nothing. You should alwayspractice progressive enhancementto prevent this.
