HTMX stands for Hypertext markup extensions and is a modern javascript library design to simplify the process of building web applications using client and server side technologies with simplicity as one of the goals. Code written using HTMX resembles ordinary HTML code and is easy to understand.

What problems does HTMX really solve ?

There was a time when we used technologies like PHP to build websites. It was all about rendering an entire page on the server and sending it to the client. Some Javascript was used to do things like animations and validations on the client. This was the model of "Multi Page Apps" or MPAs which refers to the face that we had many pages that user navigated to as they explored the web app. Javascript libraries like jQuery helped do the basic scripting for the client side.

However with time, applications became complex. Imagine a website like Facebook or Instagram without infinite scrolling and every click on a button or like refreshes the entire page. So people started using javascript to update the parts of the page in page without navigating to a new page. This sort of approach resulted into people creating front end frameworks like React and Angular.

React or Angular helped people do whats called "Single Page apps", a single page is loaded first and then for everything user does we only updates relevant parts of the page, fetching only neccessary things from the server. The disadvantage here is that maintainance of the code for both client and server gets complex and also the browser is over burdened.

Bad SPAs give terrible experience to user and their code is very hard to follow. Also SPA tech does not work well with old frameworks like Django, Rails and PHP frameworks which were primarily designed for MPAs.

Something like HTMX is likely to help DJango, Rails and Laravel like frameworks to build more rich applications that behave like SPAs but with MPA like approach.

Progressively Enhanced Apps

In HTMX you build web applications using standard HTML markup but with some extra attributes which add functionality to it. This means the page can be rendered even when javascript is disabled. The additional functionality is added progressively to the app over time.

No Complex setup and build process

Unlike other framework HTMX is a very simple library which does not require any build process. It executes in the browser. No additional compilation like React code is required.

Ajax and websockets are built in

It is extremely easy to write ajax and websockets code with HTMX and these are supported as primary citizens.

Examples

Lazy Loading

<div hx-get="/graph" hx-trigger="load">
  <img  alt="Result loading..." class="htmx-indicator" width="150" src="/img/bars.svg"/>
</div>

In above example /graph is being fetched but while the loading is in progress the img is being displayed. The trigger attribute tells the library to update the markup only after /graph is fully loaded. See it in action.

Click to load

<tr id="replaceMe">
  <td colspan="3">
    <button class='btn' hx-get="/contacts/?page=2"
                        hx-target="#replaceMe"
                        hx-swap="outerHTML">
         Load More Agents... <img class="htmx-indicator" src="/img/bars.svg">
    </button>
  </td>
</tr>

In above code when you click on the button, the get path is fetched and the content of this request is than added to the item with selector replaceMe.

You can see more examples of HTMX in action here.

Why learn HTMX ?

You can learn basics of HTMX over one evening. Since simplicity is its goal, learning it is also ridiculously simple. HTMX also can be used along with your other front end technologies such as react to vue. It especially plays well with fullstack frameworks like Ruby on Rails and Django which prefer to render html on the server.

I will not be surprised if HTMX does get widepread adoption for smaller and simpler web applications. In fact as it becomes more successful we can rely on React and Vue eco system to adopt some of its elements into their own frameworks.