HTMX: Interactivity Without SPA Framework

HTMX proposes a radical alternative to SPAs: HTML attributes enabling AJAX, WebSocket, SSE without writing JavaScript. Your backend returns HTML, HTMX inserts it in the DOM. Seems old-school but eliminates whole layers of modern complexity. In 2024 there’s growing adoption in small-to-mid teams valuing simplicity.

The Model

Key attributes:

<button hx-get="/users/42" hx-target="#user-detail">
  View user 42
</button>

<div id="user-detail">
  <!-- HTMX inserts HTML returned by /users/42 here -->
</div>

No React, Vue, build step, state management. Your Flask/Rails/Django/Phoenix returns partial HTML, HTMX swaps into DOM.

Features

• hx-get, hx-post, hx-put, hx-delete: HTTP verbs.
• hx-trigger: when to fire (click, keyup, every 5s).
• hx-target, hx-swap: where and how to insert.
• hx-push-url: history API without SPA.
• WebSocket / SSE: hx-ws, hx-sse.
• Native animations / transitions via CSS.

All HTML attributes — zero JavaScript in most cases.

Cases Where HTMX Shines

• CRUD admin dashboards.
• Form-heavy apps: e-commerce checkout, onboarding.
• Dashboards with periodic updates.
• Quick prototypes.
• Traditional server-rendered app migrations.
• Small teams without modern frontend expertise.

HTMX vs React

For content-driven apps with forms, HTMX competes seriously. For complex SPAs with rich client-side state, React wins.

With Which Backend

HTMX is agnostic:

• Django + django-htmx: popular in Python community.
• Flask with Jinja2 templates.
• Rails + Turbo/HTMX: similar philosophy.
• Phoenix LiveView: related alternative.
• Go templates + HTMX.
• Node + Express: works.

Conservative backend languages (PHP, Ruby, Python) naturally align.

HTMX + Alpine.js

For pointwise client-side interactivity (animations, dropdowns), Alpine.js is natural companion:

<div x-data="{ open: false }">
  <button @click="open = !open">Toggle</button>
  <div x-show="open">Content</div>
</div>

HTMX + Alpine combination covers 95% of apps without React.

Common Patterns

Inline Editing

<div hx-get="/edit/42" hx-trigger="dblclick" hx-swap="outerHTML">
  Double-click to edit: Ana
</div>

Infinite Scroll

<div hx-get="/page/2" hx-trigger="revealed" hx-swap="afterend">
  <!-- next page content loads when visible -->
</div>

Live Search

<input hx-get="/search"
       hx-trigger="keyup changed delay:500ms"
       hx-target="#results"
       name="q">

Simple syntax covers complex patterns.

Real Cases

• Contexte: news portal in HTMX.
• Raycast: docs + web portions.
• Many Django/Rails apps modernising with HTMX instead of full SPA rewrite.

Limitations

• Client-rich apps: offline-first, real-time collaborative (Figma-style) doesn’t fit.
• Gaming / canvas-heavy: HTMX irrelevant.
• Mobile apps: HTMX is web — not native.
• SPA-oriented vendor lock-in: Vercel, Next.js-first PaaS don’t optimise HTMX well.

Accessibility Gain

HTMX encourages progressive enhancement: site works without JS. This naturally improves a11y. Links are links, forms are forms, HTMX enhances.

Deployment

HTMX deploys with backend:

• Docker + Flask/Django: single container.
• Traditional hosting: shared with PHP/Ruby.
• Serverless: Lambda with SSR works.

No separate frontend deploy. Significant operational simplicity.

Learning Curve

For developer knowing HTML + backend:

• Day 1: understands basic attributes.
• Day 3: builds interactive pages.
• Week 2: advanced patterns.

For React-only developer moving to HTMX: requires unlearning SPA mental model.

Conclusion

HTMX is a pragmatic antidote to SPA-default. For the vast majority of enterprise apps (forms, dashboards, admin, content) it’s a sensible choice with simpler ops and less tech debt. For rich SPAs with complex state, React/Vue still win. The “hypermedia-driven” movement (HTMX, Turbo, HTMZ, LiveView) represents reclaiming web simplicity lost in the SPA era. For small-to-mid teams without budget for expert frontend, can be massive productivity gain.

Follow us on jacar.es for more on web simplicity, HTMX, and SPA alternatives.