Datastar is a hypermedia framework that gives you the backend reactivity of HTMX and the frontend reactivity of Alpine.js in a single, lightweight library.

If you've been using HTMX and Alpine together, you know the dance: HTMX handles your server requests and DOM swaps, Alpine handles your client-side interactivity, and you're constantly context-switching between two different mental models.

Datastar unifies both into one cohesive system using standard data-* HTML attributes and Server-Sent Events (SSE).

One library to rule them all.

In this guide I'll walk you through the building blocks of Datastar, show you how it compares to the HTMX + Alpine combo you already know, and demonstrate how to build interactive web applications with Astro on the backend.

I will assume you're familiar with HTMX and Alpine.js concepts.

Learn more on the official website at https://data-star.dev and check out the getting started guide.