What is Htmx? How can Htmx simplify your website?

The web development community has been buzzing about htmx lately, but what is this exciting new technology? It turns out it's much simpler than you might expect, but the usefulness of htmx is enormous.

What is htmx?

htmx is a small JavaScript library with a narrow focus. It provides common JavaScript functionality through HTML attributes. Here is a simple example:

About

This code displays the custom HTML attribute, hx-get. If you click this link, the htmx library will send an AJAX request and load the target page without refreshing the entire browser.

htmx has additional functionality that allows you to send requests:

1. From elements other than a and form.
2. On events other than click and submit.
3. Use HTTP methods other than GET and POST.
4. Replace any part of the page instead of just the whole thing.

Although htmx does support technologies like CSS animations and WebSockets, its core purpose is to simplify HTTP request handling.

How you can use htmx in a simple web application

htmx addresses specific functionality within a web application or website, rather than the operation of the entire application.

A big advantage of the library is that it is very easy to get started. 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 the link to the script on the CDN:

For local development and testing, you will need to set up a web server, like Apache, if you don't already have one running. This is a requirement, even if you are just testing with static files, because the file: protocol does not allow AJAX requests.

A simple example using infinite scrolling

Note: You can download this simple example from its GitHub repository.

Infinite scrolling is a common technique that sites like Twitter use for their feeds. When you reach the end of the list, infinite scrolling will load more items for you to continue reading.

This feature naturally requires JavaScript to check the page scroll position and load new items without refreshing the page. But htmx can do all this for you.

The following markup represents a list of posts, using an image for each post:

1. What is Htmx? How can Htmx simplify your website? Picture 1
2. What is Htmx? How can Htmx simplify your website? Picture 2
3. What is Htmx? How can Htmx simplify your website? Picture 3
4. What is Htmx? How can Htmx simplify your website? Picture 4
5. What is Htmx? How can Htmx simplify your website? Picture 5

Imagine you have these items in one file, feed1.html, with more items in feed2.html, etc. Each page would then display a subset of items that you could scroll through:

What is Htmx? How can Htmx simplify your website? Picture 6

You can now use the "next page" link to move from page to page, but you can also do infinite scrolling just as easily. Just change the last entry to:

1. What is Htmx? How can Htmx simplify your website? Picture 7

Adding these 4 properties to the last list item will perform infinite scrolling. Here is the meaning of each attribute:

As you scroll to the bottom of the list, notice how the page automatically loads new content. You can confirm this by observing your scrollbars and checking your browser's developer tools:

What is Htmx? How can Htmx simplify your website? Picture 8

Note that, with this simple static page setup, the feed2.html page includes the last item which has the hx-get attribute set to feed3.html, etc. 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:

1. Pagination: Loads and replaces items when visitors click on pagination links.
2. Form validation: On submit, replace the form with a validation message or a subset of the form.
3. Progress bar: Periodically updates the value of the progress bar based on the ping response.
4. Inline editing: Swaps an element for the text area containing that element's value.

Each of these examples can be built using standard JavaScript, htmx just makes the process much easier.

Benefits and limitations of htmx

The benefits of htmx

htmx can greatly simplify common interactions that can benefit many web applications and even many websites. It allows designers and others working with front-end websites to add functionality without having to learn JavaScript.

By abstracting common behavior, htmx ensures consistency across your projects and across them. Infinite scrolling will work the same way from page to page, regardless of who implemented it.

Because it emphasizes a declarative (what) approach rather than an imperative (how) approach, htmx functionality is often easier to understand and reason about.

Limitations of htmx

While htmx can help you forget about JavaScript in many contexts, it can't solve all your problems! You still need to write code to handle specific business logic and many lower-level functions.

Because htmx does a lot of the work for you, there is less ability to customize behavior. This is often a positive trade-off, but you will need to be prepared to give up control.

Html can help you avoid writing JavaScript but you should still be aware that JavaScript code is running in the background. You may want to use the hx-get attribute on every link, instead of the href attribute. But this creates a dependency on JavaScript; If the code fails to run for any reason, your users will be left with a link that does nothing. You should always practice progressive raises to prevent this.

Isabella Humphrey

Update 23 January 2024