Datastar — Hypermedia Framework for Real-Time Reactive UIs

Introduction

Datastar is a hypermedia framework that adds real-time reactivity to server-rendered HTML through declarative data attributes. It merges the server-driven simplicity of tools like htmx with fine-grained client-side reactivity, using Server-Sent Events for live updates and signals for state management, all in under 15 KB.

What Datastar Does

• Adds declarative interactivity to HTML via data-* attributes for actions, bindings, visibility, and fetching
• Manages client-side state through a reactive signal store defined inline with data-store
• Streams HTML fragments from the server using Server-Sent Events for real-time partial page updates
• Handles form binding, validation display, and conditional rendering without writing JavaScript
• Works with any backend language or framework that can return HTML and SSE streams

Architecture Overview

Datastar processes data-* attributes on page load and on DOM mutations. A reactive signal graph tracks dependencies between store values and DOM bindings, updating only the affected elements when signals change. For server interactions, Datastar opens SSE connections that receive merge instructions (append, prepend, morph, or replace) along with HTML fragments, allowing the server to push incremental UI updates without polling or WebSocket complexity.

Self-Hosting & Configuration

• Include the script from a CDN or install via npm with npm install @starfederation/datastar
• Define reactive state with data-store attributes containing JSON on any parent element
• Use data-on-click, data-on-submit, and other event attributes to trigger actions
• Fetch server content with data-on-click="@get('/endpoint')" which merges the response into the DOM
• Backend endpoints return SSE streams with datastar-merge events for real-time HTML fragment delivery

Key Features

• Tiny footprint: under 15 KB gzipped with zero dependencies
• Declarative reactivity using HTML data attributes requires no build step or JavaScript authoring
• SSE-based server communication enables real-time updates with automatic reconnection
• Fine-grained DOM updates through signal-driven rendering avoid full page reloads
• Backend-agnostic: works with Go, Python, Ruby, PHP, Node.js, or any language that serves HTML

Comparison with Similar Tools

• htmx — attribute-driven server interaction; Datastar adds a reactive signal store for client-side state
• Alpine.js — client-side reactivity only; Datastar integrates SSE for server-driven real-time updates
• Hotwire Turbo — frame and stream based; Datastar uses fine-grained signals for more targeted DOM updates
• LiveView (Phoenix) — requires Elixir/Phoenix; Datastar is backend-agnostic with a simpler attribute syntax
• Unpoly — focuses on progressive enhancement; Datastar adds reactive state management on top of hypermedia patterns

FAQ

Q: Do I need a build step or bundler to use Datastar? A: No. Include the script tag and start adding data attributes. No compilation, transpilation, or bundler configuration is required.

Q: Which backends work with Datastar? A: Any backend that can serve HTML and optionally stream SSE events. Official SDK helpers exist for Go, and community libraries cover Python, PHP, and other languages.

Q: How does it compare to writing a React or Vue app? A: Datastar keeps logic on the server and uses HTML attributes for interactivity. This eliminates the need for a JavaScript build pipeline, API layer, and client-side routing that SPA frameworks require.

Q: Can I use it alongside htmx or Alpine.js? A: While possible, mixing hypermedia frameworks can cause attribute conflicts. Datastar is designed to be a complete solution covering both client reactivity and server communication.

Sources

• https://github.com/starfederation/datastar
• https://data-star.dev/