HTMX: One Of The Best JavaScript Libraries

4 min readDec 16, 2023

HTMX is a dependency-free, browser-oriented JS library. What that means is that HTMX can access browser features without JavaScript. Instead, HTMX uses HTML directly. It can replace your Vue, your Angular, and more; all with one of the easiest syntax I have ever seen, HTML-like syntax.

The Syntax

HTMX’s syntax is indeed like HTML’s. This is an example of the syntax:

<!-- A basic tag for HTMX -->
<a href="/blog">Blog</a>

Source: https://htmx.org/docs/#introduction

This anchor tag loads the specific content into the user’s browser window. Unlike a normal anchor in HTML, HTMX will show the user the page when they click on a link, kind of like an iframe tag.

HTMX’s Capabilities

There are many things HTMX can do. HTMX has AJAX support (Asynchronous JavaScript and XML), can create amazing CSS transitions, has access to WebSockets, and more:

1. Server-Sent Events (SSE)

SSE is a way servers can send data to the client-side (front-end) automatically, like WebSocket.

2. Form Validation

HTMX can confirm in real-time if, for example, a user’s login input is correct from servers.

3. Auto-Updating Content

HTMX can automatically update any content on the screen. For example, live sports scores, profile changes, or even writing articles online ;).

4. And Many More!

HTMX can do many amazing things using easy HTML attributes.

Real-World Website Examples

It is very important to know the real-world examples of HTMX, so you can see how companies use HTMX. Note that these aren’t all popular companies, but they are still real websites.

1. I Love Typography uses HTMX in its cart

A screenshot of the website, https://fonts.ilovetypography.com/

I checked the page’s source to check for any HTMX syntax using Cmd/Ctrl + F to search for any hx, and I found this:

<div id="sprigCartCount" class="sprig-component" data-hx-target="this" data-hx-include="this" data-hx-trigger="load, refresh" data-hx-get="https://fonts.ilovetypography.com/index.php/actions/sprig-core/components/render" data-hx-vals="{&quot;sprig:siteId&quot;:&quot;47a704be5902915f369e259a0f689efab304a8da31bf5d4eea15aef6476df5052&quot;,&quot;sprig:template&quot;:&quot;eead0c34c0f0c"></div>

This is the cart, so when you buy a font, it automatically adds that font to your cart, without a single line of vanilla JavaScript needed for that.

2. MOMO uses HTMX in its cart

MOMO, a race car e-commerce, also uses an HTMX in its shopping cart:

<div id="cart-icon" class="sprig-component" data-hx-target="this" data-hx-include="this" data-hx-trigger="refresh" data-hx-get="https://momo.com/en-us/actions/sprig-core/components/render" data-hx-vals="{&quot;sprig:siteId&quot;:&quot;c1841fe6f32c851aef7dcc6f06821cf1c83610f28a785bec5e1dcbd29c95e22f1&quot;,&quot;sprig:component&quot;:&quot;2cced1c49561f9cfef5948d1e6e913d08c3fd0533b063f221f4d101155946b15&quot;,&quot;sprig:template&quot;:&quot;e618b8e238add04f1fbb9b1aeaef55d2781225e59a9023a90ddeae9a1b5da342shop\/cart\/_includes\/cart-icon&quot;}"> 
<a href="https://momo.com/en-us/shop/cart" class="nav-link position-relative c-header__cart">
<span class="d-lg-none position-relative">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-shopping-cart"><circle cx="9" cy="21" r="1"></circle><circle cx="20" cy="21" r="1"></circle><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2–1.61L23 6H6"></path></svg>
</span>
<span class="d-none d-lg-block">Cart</span>
</a></div>

This is what the code displays:

I added something to the cart to demonstrate my point.

3. Stencila uses HTMX in its search bar

This website, Stencila (which showcases various research projects), uses HTMX in its search bar as shown in the code below:

<label for="projects-search-input"
class="label is-sr-only">Search projects</label>
<div class="field has-addons width-full width-half-tablet">
<div class="control has-icons-left has-icons-right is-expanded">
<input id="projects-search-input"
class="input"
type="text"
name="search"
placeholder="Search by name or description"
hx-trigger="keyup changed delay:500ms, role-changed"
hx-get="/api/projects"
hx-include="#projects-search-role"
hx-template="projects/_project_list.html"
hx-indicator="#projects-search-indicator"
hx-target="#projects-search-result">
<span class="icon is-left">
<i class="ri-search-line"></i>
</span>
<span class="icon is-right htmx-indicator"
id="projects-search-indicator">
<i class="ri-loader-line animate-spin"></i>
</span>
</div>
</div>

Result:

A screenshot of the website, https://stencila.elifesciences.org/projects/

The code states:

Search Input Field

HTMX Attributes:

hx-trigger: Activates the search on keyup and change, with a 500ms delay.
hx-get: Sends a GET request to /api/projects.
hx-include: Includes additional data from an element with ID projects-search-role.
hx-template: Specifies a template for displaying results.
hx-indicator: Links to a spinner indicating loading status.
hx-target: Designates where to display search results.
Magnifying glass icon for search and a spinning loader for feedback.

Conclusion

HTMX has so many possibilities that I can not get to talk about today. This is only the basics of HTMX. If you would like to learn more about it, I would recommend checking out this YouTube series. It also covers Django as well. HTMX is once again a very useful library, and in my opinion, one of the best.