A 2024 Exploration into HTMX

Are you ready to discover the current game changer in web development? Meet HTMX, a groundbreaking library that changes the way you interact with web apps. HTMX allows you to elegantly incorporate AJAX queries, server-side events, and websockets straight into your HTML, removing the need for unnecessary JavaScript code. It is sleek, efficient, and makes frontend development easier than ever before – no wonder it’s the talk of the town in the dev community.

HTMX attempts to enable access to modern browser features directly in HTML code, without requiring a single line of JavaScript. Even though the library’s version 1.0 was just released a few years ago, in late 2020, the project has already grown to be quite popular.

As of this article piece, it has almost 30,000 stars on GitHub and has been approved into the GitHub Open Source Accelerator!

Let’s further embark on why the dev community is so excited about HTMX.

What is HTMX

HTMX is a small, dependency-free, expandable library that lets you use modern browser capabilities directly from HTML rather than requiring JavaScript. It enables you to utilize AJAX (i.e., fetching content without refreshing the entire page), CSS Transitions, WebSockets, and Server Sent Events directly through HTML attributes. The project’s purpose is to overcome HTML’s restrictions and create a genuine hypertext.

What is the simplest way to grasp what we’re talking about? An example! Look at this snippet:

<button hx-get="/api/v1/hello-world" hx-swap="outerHTML">Click Me</button>

The special hx-get and hx-swap attributes tell HTMX:

“When a user clicks on this button, tell the browser to perform an AJAX request to the ‘/api/v1/hello-world’ endpoint and change the entire button with the HTML content returned by the server."

How HTMX was Created

Web development has progressed significantly since it first started. It began with static web sites, when HTML files were manually updated. The arrival of JavaScript enabled interaction, opening an entire new era to web development and changing programming as we once knew it. AJAX then completed the transformation, allowing for smooth content changes and new interactions.

Frameworks such as React, Vue, and Angular rose to prominence and eventually became the industry standard. These technologies are ideal for structured applications. However, they are also very sophisticated, and sometimes you just want to keep things simple. That is why HTMX!

HTMX promises to provide efficient interactivity without the complexities of typical JavaScript installations. In particular, it adds custom properties to HTML, allowing AJAX queries to be executed without the need for JavaScript.

HTMX Foundations: Syntax and Features

The ability to send AJAX queries straight from HTML, without the use of JavaScript, lies at the heart of HTMX. This is probable because of the following attributes:

• hx-get: To perform a GET request to the given URL.
• hx-post: To perform a POST request to the given URL.
• hx-put: To perform a PUT request to the given URL.
• hx-patch: To perform a PATCH request to the given URL.
• hx-delete: To perform a DELETE request to the given URL.

When a certain event is triggered, the HTML element with one of these HTMX attributes sends an AJAX request of the specified kind to the provided URL. Consider the case below:

<button hx-post="/api/v1/products/buy">Buy</button>

This basically tells the browser when the user clicks the <button>, send a POST request to the URL '/api/v1/products/buy' and load the response into the inner HTML of the <button>.

Request Triggers

By default, HTMX AJAX requests are initiated by the “natural” event related with the HTML element.

• change: For the <input>, <textarea>, and <select> elements.
• submit: For the <form> element.
• click: For every other element.

Returning to the example from earlier, it should now be evident why the action that initiates the request is a click, even if it is not mentioned.

To make any modifications to the default trigger behavior, you can apply the hx-trigger attribute to set which HTML event will cause the request.

Now check out this example below:

<span hx-get="/api/v1/products" hx-trigger="mouseenter">Hover Me!</span>

This request trigger lets the browser know that when the user moves the mouse over <span>, perform a GET request to the URL '/api/v1/products' and render the response in the inner HTML of the <span>.

Query Parameters and Body Data

Depending on the parameters and body data, HTMX handles these kinds of requests differently.

• GET Requests: The query parameters should be included in the URL provided to hx-get. By default, hx-get does not provide additional parameters with the request. In any case, you may adjust this using the hx-params property, which is discussed in the documentation.
• Non-GET Requests: If an element is a <form>, the body shall contain the values of all inputs, using the name attribute as the parameter name. If it’s not a <form>, the body will contain the input values of the closest surrounding <form>. Otherwise, if it contains a value property, it will appear in the body. When the default behavior is insufficient, the hx-include and hx-params attributes enable you to specify which values and parameters to set. Alternatively, you may programmatically edit the body data by listening for the htmx:configRequest event.

The Benefits of Using HTMX

1. Simple to learn

Unlike complete frontend frameworks like React or Angular, which require a high learning curve, HTMX takes a more easy approach. By extending HTML, it creates a familiar environment for programmers, allowing them to get started easier.

2. Performance enhancements

HTMX’s lightweight nature results in more rapid page loads. Users benefit from faster interactions and lower latency since they do not have to load large JavaScript libraries or frameworks.

3. Reduced client-side complexity.

HTMX decreases client-side complexity by offloading much of the dynamic behavior to server logic. This produces cleaner, better-maintained code.

4. Seamless integration

HTMX is intended to work seamlessly with current technologies. Whether you’re dealing with server-side frameworks or databases, HTMX can integrate seamlessly without requiring significant changes.

5. Improved user experience

HTMX provides a more seamless user experience by allowing content to be updated dynamically without requiring a full page reload. Transitions are smooth, and users are not interrupted by sudden page refreshes.

6. Cost-effective development

HTMX projects may frequently be finished faster due to their simplicity and less dependency on heavy frontend development, resulting in cost benefits in terms of development time and resources.

7. Empowerment of backend developers

Backend developers may now take an active role in designing the user interface. They can use HTMX to create interactive UI components without getting too deep into frontend code.

In a world where speed, performance, and user experience are critical, HTMX appears as an appealing option for web developers. It provides a good combination of strength and simplicity, making it a great tool for current web development.

Conclusion

In the constantly shifting landscape of web development, HTMX has its own highway. It improves HTML by offering developers a familiar environment and making it easy to dig into web interactivity.

At a time when a web page’s performance may define its user experience, HTMX stands out for its lightweight nature, ensuring speedy loads and fluid interactions. It also enables backend developers by allowing them to delve further into frontend activity, bridging the often-vast gap between server logic and client behavior.

While the frontend market appears to be dominated by heavyweights such as React and Vue, HTMX offers a unique perspective. It calls into question the widely held idea that a dynamic web program requires a large amount of JavaScript, demonstrating that there is another way ahead.

HTMX may be more than simply the latest gadget on the market. It hints at a shift in how we think about web development, emphasizing the delicate balance between technical complexities and user experience. Who knows where HTMX will take the future of web development as its community expands and more web developers adopt it?

Further Reading

• HTMX in a Nutshell
• Creating UI Elements with HTMX
• Understanding HTMX
• Building a Full-Stack Application with Express and HTMX

About Angela

Angela, a molecular biologist turned entrepreneur and lover of all things tech, takes pride in being part of communities that continuously create tools that build the new digital infrastructure of tomorrow. She co-founded the coding bootcamp "Code Academy" located in Macedonia and contributed to creating the new wave of tech talent and placing them in companies worldwide. She now builds remote tech teams by connecting the best talent with companies from the US and Western Europe.

Looking for tech talent? Shoot Angela an email at angela.sokolovska@gmail.com.

Connect with Angela on LinkedIn.