Why I switched from HTMX to Datastar
Datastar replaces the author's HTMX-and-AlpineJS coordination burden with a smaller, server-driven model for component updates and real-time UI. Its SSE-based approach enables multi-user push updates without custom WebSockets or sprawling frontend state.
Why I switched from HTMX to Datastar
Author: Everyday Superpowers | Published: 2025-10-09 | Generated: 2025-10-21 | Domain: everydaysuperpowers.dev
Tags: ‘#datastar’ ‘#htmx’ ‘#hypermedia’ ‘#server-sent-events’ ‘#web-components’ ‘#django’
TLDR
The author switched from HTMX to Datastar after finding that coordinating HTMX with AlpineJS created synchronization bugs, initialization complexity, and more code than desired. Datastar uses a compact client library (under 11 KB), simpler declarative event attributes, and server-directed HTML patches to keep state and UI-update logic centralized. Its Server-Sent Events support makes real-time, multi-user applications practical without custom WebSocket infrastructure, while web components provide a focused escape hatch for local client-side behavior.
Key Takeaways
- HTMX plus AlpineJS introduced coordination overhead: Because the libraries do not communicate directly, the author spent time debugging stale components and manually orchestrating initialization and events.
- Datastar uses a lighter interaction API: An HTMX request commonly needs several attributes for URL, target, selection, swap behavior, and triggers; Datastar can often express the same request as
data-on-click="@get('/rebuild/status-button')". - The server controls page updates: Rather than placing response-targeting rules on the element that initiates a request, Datastar lets server responses patch matching HTML elements, including multiple components in one request.
- SSE enables real-time collaboration without custom WebSockets: The server can push UI patches to clients, browsers automatically reconnect after interruptions, and clients can report the last event received.
- Performance claims extend beyond ordinary CRUD: The article cites a Datastar demo with one billion checkboxes and a radar application reportedly updating more than 800,000 points per second, with changed radar dots reflected within 100 ms.
Images & Media
None present in article.
Referenced Links
- DjangoCon Europe 2022: From React to HTMX on a real-world SaaS product — David Guillot’s talk describing a React-to-HTMX migration that cut code by nearly 70%.
- FlaskCon 2025: Death to the spinner—Event sourcing for reactive web apps — The author’s talk preparation prompted the HTMX/AlpineJS synchronization issue.
- Datastar — Datastar’s official site and examples.
- Datastar database-monitoring demo — Hypermedia-based database monitoring demonstration.
- One billion checkboxes — Datastar experiment rendering one billion checkboxes on inexpensive infrastructure.