HTMX vs React

HTMX is a small JavaScript library (about 16 kilobytes) that lets you build web apps by adding attributes directly to HTML. Instead of sending JSON data back and forth, HTMX swaps in raw HTML chunks from the server. React is a much larger framework (around 45 kilobytes just for its core) designed for "deeply interactive client applications" — things like Google Sheets or a map you drag in real time.

For AI development, the choice matters because AI coding agents are good at writing front-end code, especially React. But HTMX keeps a single copy of your app's state on the server, while React keeps state twice (once on the server and once in the browser), forcing you to write an API just to sync them. This mismatch makes React more complex for AI to manage. One real company, Contact, rewrote their React app in HTMX and reduced code by 67%, slashed JavaScript dependencies from 255 to nine, and cut build times by nearly 90%.

However, HTMX is not a replacement for everything. It is for "the other 90% of the web" — forms, dashboards, content management. AI agents can write either, but the decision depends on whether you or the agent is doing the writing. If your AI agent is handling the code, HTMX's simplicity means fewer files and less state to track. For apps with "thousands of interdependent widgets reacting instantly," stick with React. For everything else, HTMX removes a staggering amount of complexity.

How to Use HTMX vs React Step by Step with Examples

HTMX is a tiny 16-kilobyte library that lets you add modern interactions to HTML by using attributes directly in your markup. For example, to load more content when a user clicks a button, you write `<button hx-get="/more" hx-target="#content">Load More</button>`. That single attribute fires an HTTP request, the server sends back a chunk of HTML, and HTMX swaps it into the `#content` div. That’s it. React would require you to create a component, manage state (data that changes over time), write a fetch call, parse JSON, and trigger a re-render. HTMX cuts all that out.

React excels when you have a deeply interactive client application—like a real-time spreadsheet or a drag-and-drop map. It shines with thousands of interdependent widgets reacting instantly. But for the other 90% of the web—forms, dashboards, content CRUD—HTMX is a simpler choice. It keeps a single copy of state on the server and sends HTML, while React forces you to keep state twice (server and browser) and write an API to sync them.

One real company, Contact, rewrote their React app in HTMX. They cut code by 67%, dropped JavaScript dependencies from 255 to nine, and reduced build times by nearly 90%. The honest verdict: if you are building complex client-side apps, reach for React. For most everything else, HTMX gives you a leaner, faster path.

Reach for React when building a deeply interactive client application like a spreadsheet (Google Sheets), a drag-in-real-time map, or anything offline with thousands of interdependent widgets reacting instantly. That is React's home turf. For the other 90% of the web—forms, dashboards, content CRUD—use HTMX (a 16-kilobyte library that lets HTML talk directly to the server). HTMX revives real hypermedia by sending HTML instead of juggling JSON, so you keep a single copy of state on the server. An entire category of bugs disappears.

A common pitfall with React is keeping state twice (once on the server, once in the browser) and writing an API forever to sync them. HTMX avoids this via a simple three-word loop: request-response-swap. You add an attribute like hx-get or hx-post to an element, it fires an HTTP request, the server sends back a chunk of HTML, and HTMX drops it into the page. Locality of behavior (seeing what an element does right in the markup) means no hunting through a dozen files to trace one click.

The honest verdict: HTMX is not React's funeral. But the receipts are strong. Contact rewrote their React app in HTMX and got 67% less code, a drop from 255 to 9 JavaScript dependencies, and build times cut by nearly 90%. Best practice: use HTMX for most apps and sprinkle small tools where needed instead of one giant framework. Adopt React only when the app demands deep interactivity.