Skip to content

HTMX vs React: When to Choose Hypermedia Over a JavaScript Framework

After shipping dozens of products with both HTMX and React, here is my honest take on when hypermedia-driven development wins — and when it does not.

MI

mubashar

· 2 min read
Share

The JavaScript ecosystem has given us powerful tools for building interactive web applications — React chief among them. But in 2020, something interesting happened: HTMX quietly changed how many developers think about interactivity on the web. After shipping dozens of products with both, here is my honest take.

What HTMX actually is

HTMX is a library that lets you access modern browser features directly from HTML attributes. Instead of writing JavaScript to fetch data and update the DOM, you annotate your HTML elements and let HTMX handle the rest. A button that loads more posts without a page refresh looks like this:

<button hx-get="/blog/posts/?page=2"
        hx-target="#post-list"
        hx-swap="beforeend">
  Load more
</button>

No component trees. No state management. No build step. The server renders HTML and HTMX swaps it into the page. This is the hypermedia approach — sending HTML over the wire rather than JSON.

What React actually is (in this context)

React is a component-based UI library that manages a virtual DOM and syncs it to the browser. Your server returns JSON, your client renders it. You get a rich programming model, a huge ecosystem, and the ability to build genuinely app-like experiences — at the cost of significant complexity.

When HTMX wins

HTMX is a better choice than React in more situations than most developers realise:

  • Content-heavy sites with selective interactivity — blogs, marketing sites, dashboards, admin panels. Most of the page is static; only parts update.
  • Server-rendered apps (Django, Rails, Laravel) — you already have views, templates, and URL routing. HTMX lets you add interactivity without abandoning what works.
  • Small teams and solo developers — you only need Python (or Ruby, or PHP). No Node toolchain, no webpack config, no TypeScript setup. Ship faster.
  • SEO-critical applications — because content is server-rendered, search engines see it immediately with no client-side rendering delay.
  • Forms and CRUD interfaces — inline editing, live validation, multi-step forms. HTMX handles all of this elegantly.

When React wins

React earns its complexity in specific scenarios:

  • Highly stateful, app-like UIs — think Figma, Notion, or a complex data visualisation dashboard. If your UI has rich client-side state that changes independently of the server, React's component model earns its keep.
  • Real-time collaborative features — multiple users editing the same document simultaneously.
  • Mobile apps with React Native — if you need web and native from one codebase.
  • Large teams with strong JavaScript skills — React's component model scales well when everyone already knows it.

The honest verdict

For the vast majority of web applications — content sites, SaaS dashboards, internal tools, e-commerce — HTMX paired with a solid server framework is the simpler, faster, and more maintainable choice. React is powerful, but power has a price. Choose based on your actual requirements, not on what is popular.

I built this site with Django + HTMX + Tailwind. It was faster to ship and easier to maintain than any React project I have worked on. The proof is in the shipping.

MI

Written by

Mubashar Iqbal

Web developer, SEO expert, and independent maker. I build products, write about what I've learned, and create free tools for developers and marketers.