The ultimate goal of HTMX is to provide modern browser interactivity directly within HTML, without the need for JavaScript. Although relatively new, with its initial release in late 2020, this frontend library has quickly caught the attention of the IT web community.
With 2nd place in the 2023 JavaScript Rising Stars “Front-end Frameworks” category (right behind React), a spot in the GitHub Accelerator, and over 20k stars on GitHub, HTMX is rapidly gaining popularity. Why is there so much excitement around it? Is it here to dethrone React? Let’s find it out!
In this HTMX vs React guide, you will discover why we came to HTMX, what it is, what features it offers, and how it compares to React in terms of performance, community, functionality, and more.
HTMX vs React in Short
Take a look at the summary table below to jump right into the HTMX vs React comparison:
HTMX | React | |
---|---|---|
Developed by | Big Sky Software | Meta |
Open source | ✅ | ✅ |
GitHub stars | 29k+ | 218k+ |
Weight | 2.9 kB | 6.4 kB |
Syntax | Based on HTML, with custom attributes | Based on JSX, an extended version of JavaScript |
Goal | Add modern interactivity features directly in HTML | Provide a component-based, full-featured UI JavaScript library |
Learning curve | Gentle | Steep |
Features | AJAX requesting and some other minor features | Composability, one-way data binding, state management, hooks, and many others |
Performance | Great | Good, especially on large-scale apps or complex web applications |
Integration | Embeddable into existing HTML pages | Embeddable into existing HTML pages, but mainly used on JavaScript-based projects |
Community | Small, but growing | The largest on the market |
Ecosystem | Small | Very rich |
How We Got to React: From jQuery to Modern Web Frameworks
In the early days of web development, developers relied on jQuery to deal with AJAX requests, DOM manipulation, and event handling. Over time, online applications evolved and became more modern, structured, and scalable. This is when frameworks and libraries such as Angular, React, and Vue made the difference.
React introduced a component-based architecture, changing web development forever. Its declarative approach to UI and one-way data flow simplifies web development, promoting reusability and maintainability. These aspects have made React the go-to solution for building dynamic, responsive, and interactive web applications.
How We Got to HTMX: From Web Frameworks to a More Modern HTML
While web frameworks like React, Vue, and Angular are great for building structured web applications, their complexity can represent a huge overhead for developers seeking simplicity. This is where HTMX comes into play!
HTMX is a lightweight solution for modern interactivity as in React, but with simple integration and no overhead as in jQuery. It extends HTML with custom attributes, enabling AJAX requests without the need for JavaScript code. The idea behind HTMX is to keep things simple, allowing developers to wander into the magic of the Web without abandoning familiar HTML.
HTMX serves as a streamlined and flexible alternative in a universe dominated by more complex frontend frameworks. Learn more in the section below.
HTMX: A New, Modern Approach to Interactivity
HTMX is a lightweight, dependency-free, extendable JavaScript frontend library to access modern browser features directly from HTML. In detail, it allows you to deal with AJAX requests, CSS Transitions, WebSockets, and Server Sent Events directly in HTML code.
The library gives you access to most of those features just by setting special HTML attributes, without having to write a single line of JavaScript. This way, HTMX brings HTML to the next level, making it a full-fledged hypertext.
Let’s now see what the library has to offer through some HTMX examples.
AJAX Request Triggers
The main concept behind HTMX is the ability to send AJAX requests directly from HTML. That is possible thanks to the following attributes:
hx-get
: Issues aGET
request to the given URL.hx-post
: Issues aPOST
request to the given URL.hx-put
: Issues aPUT
request to the given URL.hx-patch
: Issues aPATCH
request to the given URL.hx-delete
: Issues aDELETE
request to the given URL.
When the HTML element with one of those HTMX attributes is triggered, an AJAX request of the specified type to the given URL will be made. By default, elements are triggered by the “natural” event (e.g., change
for <input>
, <textarea>
, and <select>
, submit
for <form>
, click
for everything else). You can customize this behavior with the attribute hx-trigger
.
Now, consider the HTMX example below:
<div hx-get="/users">
Show Users
</div>
This tells the browser:
“When a user clicks on the
<div>
, send aGET
request to the/users
endpoint and render the response into the<div>
“
Note that for this mechanism to work, the /users
endpoint should return raw HTML.
Query Parameters and Body Data
The way HTMX sets query parameters and body data depends on the type of HTTP request:
GET
requests: By default,hx-get
does not automatically include any query parameters in the AJAX request. To set query parameters, specify them in the URL passed tohx-get
. Otherwise, override the HTMX default behavior with thehx-params
attribute.- Non-
GET
requests: When an element is a<form>
, the body of the AJAX request will include the values of all its inputs, using theirname
attribute as the parameter name. When it is not a<form>
, the body will involve the values of all inputs in the nearest enclosing<form>
. Otherwise, if the element has avalue
attribute, that will be used in the body. To add the values of other elements to the body, use thehx-include
attribute with a CSS selector of all the elements whose values you want to include in the body of the request. Then, you can employ thehx-params
attribute to filter out some body parameters. You can also write a customhtmx:configRequest
event handler to programmatically modify the body definition logic.
AJAX Result Handling
As mentioned earlier, HTMX replaces the inner HTML of the element that triggered the AJAX request with the HTML content returned by the server. You can customize this behavior using the hx-swap
and hx-target
attributes:
hx-swap
defines what to do with the HTML returned by the server, accepting one of the following auto-explicative values:innerHTML
(default),outerHTML
,beforebegin
,afterbegin
,beforeend
,afterend
,delete
,none
.hx-target
accepts a CSS selector and instructs HTMX to apply the swap logic to the selected element.
Now, take a look at the HTMX snippet below:
<button
hx-post="/tasks"
hx-swap="afterend"
hx-target=".todo-list"
>
Add task
</button>
This tells the browser:
“When a user clicks the
<button>
node, perform aPOST
request to the/tasks
endpoint and append the HTML returned by the server to the.todo-list
element”
Awesome! You just explored the basics of HTMX and the fundamentals of how it works. Keep in mind that these are just some of the features supported by the library. For more information, explore the documentation.
HTMX vs React: Comparing the Two Web Technologies
Now that you know what HTMX is and how it works, let’s look at how it compares against React, the reigning king of frontend web development libraries. This section will explore the essential aspects to consider when determining which is better between HTMX and React.
Time to dig into the HTMX vs React comparison!
Approach
- HTMX: It extends HTML, providing the ability to interact with the server directly in markup. It prioritizes simplicity, conciseness, and readability:
<div hx-get="/hello-world">
Click me!
</div>
- React: A full-featured JavaScript library for building user interfaces based on reusable components written in JSX:
import React, { useState } from "react"
export default const HelloWorldComponent = () => {
const [responseData, setResponseData] = useState(null)
const handleClick = () => {
fetch("/hello-world")
.then(response => response.text())
.then(data => {
setResponseData(data)
})
}
return (
<div onClick={handleClick}>
{responseData ? <>{responseData}</> : "Click me!"}
</div>
)
}
Learning Curve
- HTMX: With its HTML-based syntax and approach, HTMX offers a smooth learning curve. Developers already familiar with traditional web development can master it in a few days, while newcomers can start using it from day zero.
- React: Because of its unique approach to web development, React has a steep learning curve. Before building your first React application, you need to understand the concepts of SPA (Single Page Application), Virtual DOM, JSX, state management, props, re-renders, and more. This may overwhelm some beginners.
Features
- HTMX: The core concept behind the library can be summarized as enabling AJAX calls in HTML without the need for JavaScript code. While other cool features could be mentioned, that pretty much sums up what HTMX has to offer.
- React: Some of the features that have made React so popular are its component-based architecture based on code reuse, JSX syntax for easy UI development, robust state management, hooks, support for both client- and server-side rendering, efficient Virtual DOM, CSS-in-JS support, and more.
Performance
- HTMX: Its lightweight, dependency-free nature means that web pages that rely on HTMX will have fast initial page loading and reduced client-side processing. In general, HTMX performs well when it comes to applications with simple interactions.
- React: SPA applications built in React usually contain a lot of JavaScript. That results in higher network utilization and client-side rendering times. However, the virtual DOM and efficient reconciliation algorithm allow React to swiftly update the UI, making it suitable for large-scale applications.
Integration
- HTMX: It can be embedded in any HTML web page. HTMX integrates natively with backend technologies that can return raw HTML content, such as Node.js, Django, Laravel, Spring Boot, Flask, and others.
- React: As a frontend library, not a framework, it is technically possible to integrate it into any existing sites. At the same time, integrating React may require additional configuration, especially in frontend projects not built around JavaScript.
Note that HTMX and React can coexist in the same project. This means that you can have a web page that uses both React and HTMX in different sections of the page, and even React components that rely on HTMX attributes.
Use Cases
- HTMX: Best suited for projects that require simple, modern, and dynamic interactivity. HTMX is a lightweight and efficient option when you do not need all the advanced features of a full frontend framework. It is also ideal for backend developers who want to serve interactive HTML pages without having to write dedicated client-side JavaScript logic.
- React: ****Best suited for developing single-page applications and complex web applications that need to provide a rich user experience and/or deal with complex state. It is also a great option for large teams who want to reuse UI components across multiple projects.
Migrating from React to HTMX is possible and can lead to a 67% smaller codebase. However, that is recommended only when you do not need all the features that make React so popular, such as advanced state management.
Community
- HTMX: With the first release in late 2020, you cannot expect HTMX to be as popular as React. So, you will not find many guides, tutorials, and walkthrough videos about it. Nevertheless, the project has already reached more than 29k starts on GitHub and there is a lot of buzz around it.
- React: With millions of developers worldwide and over 218k stars on GitHub, React is the undisputed heavyweight champion of web development libraries. According to a Statista survey, React is by far the most used frontend web library, with a market share of over 40%. No wonder, there are hundreds of thousands of tutorials, articles, and videos dedicated to React.
Ecosystem
- HTMX: While the library is extensible, the project is relatively new and there are not many HTMX libraries and utilities available. As of this writing, the
htmx
tag on npm counts only 35 packages. - React: The
react
tag on npm alone counts over 6,000 libraries. This is just one of the React-related tags, and you can find dozens of thousands of other libraries compatible with it.
Which Frontend Library Should You Choose Between HTMX and React?
As always when comparing two technologies, there is no real winner in absolute terms. HTMX and React are both excellent frontend web development libraries, and the choice of one over the other depends on the requirements and goals of your project.
When creating web applications that require state management, offer complex functionality, and need reusable components, then React is a more suitable option. When building sites with simple interactivity and no particular advanced features, HTMX might be a better solution.
To help you make an informed decision between HTMX and React, let’s look at the pros and cons of both libraries!
HTMX: Pros and Cons
👍 Pros:
- Simple and intuitive HTML-based syntax.
- AJAX requests and DOM updates with just a couple of HTML attributes.
- Dynamic interactivity directly in HTML with no JavaScript.
- Easily integrates into existing HTML web pages.
- Lightweight library that weighs only a few kB.
👎 Cons:
- Needs backend UI endpoints that return raw HTML and are therefore more tied with the frontend.
- Still relatively new.
React: Pros and Cons
👍 Pros:
- Structuring UI with reusable components written in JSX.
- Complex state management and support for many other useful features.
- The most used frontend web library in the world.
- Developed and maintained by Meta.
- Unopinionated on the backend.
👎 Cons:
- Not so easy to learn and master.
- Difficult to integrate into non-JavaScript-based projects.
Conclusion
In this article HTMX vs React, you learned what HTMX is, how it works, and how it competes against React. HTMX enables modern HTML interactivity without the complexities introduced by full-fledged web frameworks. Although its future is bright, HTMX is not here to replace React. To better understand where HTMX shines, take a look at the list of HTMX examples from the official site.
Quite the opposite, the two libraries can coexist and target different use cases. As learned here, React is ideal for web applications with a rich user experience and complex functionality, while HTMX is better for web pages with simpler interactivity needs.
Did you test this page in mobile for once?
A complete, detailed article for understanding differences between react and htmx. Thank you for the great effort 🙏
Thanks!
React is more than 6kb, you need to imcrease react-dom
Small error in section “Ajax Result Handling” about HTMX: in the sample code, values for hx-swap and hx-target are swapped
We just fixed that, thanks!
in the example at https://semaphoreci.com/blog/htmx-react#:~:text=%3Cbutton%20%20%20hx%2Dpost%3D%22/tasks%22%20%20hx%2Dswap%3D%22.todo%2Dlist%22%20%20%20hx%2Dtarget%3D%22afterend%22%3E%20%20Add%20task%3C/button%3E you swapped (ha!) hx-swap and hx-target and their values should be reversed
Fixed that, thanks!
Great comparison, thank you!
You say that projects can implement both React & HTMX together, and that pages can even have both at the same time. I suppose that would expand the possibilities frontier. But that also expands the project complexity. The idea of HTMX seems to be one of simplification. Mixing things together would seem to achieve the opposite of simplification. Respectfully, imagine writing this article (or some set of instructions) with a mixture of scripts from different languages (e.g., German, Arabic, Mandarin, Hindi, etc.) instead of just one script for one language (e.g., English).
There is a big (IMO) drawback to HTMX that isn’t mentioned here, and it is that it does not support JSON based REST API integration, a common design pattern in today’s landscape. Server requests will need to send back static HTML in order to work with HTMX. So if I have a project that is an API with a React frontend, migrating would require changes on the server side as well.
Incorrect. Htmx is server side rendering = no json API required.
Yes you have to send html , but the page it self may contain other Ajax commands
This article was very helpful! It helped me both understand what HTMX is and if I should choose it over a JS framework. Thanks!