@sudodevnull/datastar NPM

Datastar

Typescript library for making hypermedia systems using little to no Javascript code. The Typescript may be important to the datastar dev but its just a normal JS file to the browser. The goal is to make it easy to create realtime web apps with as little Javascript as possible. This is done by using HTML attributes to define the behavior of the page. This is similar to Alpine.js + HTMX but with a few key differences.

It's just normal HTML data attributes that get watched by plugins and build up a context object. The current plugins work off of signals to make everything reactive and allow very fast interactions in very little code.

Size

Community

Lives as a channel in the EventGraph Discord server. Feel free to join and ask questions. #datastar channel

Features

Pros

Built with reactive applications in mind, not just pages.
💯 strict Typescript with full tree shaking support
📦 0 dependencies
The best parts of Alpine.js and HTMX but created in a unique way to allow for a more declarative approach
💯 HTML compliant
Fine grain reactivity
Using Vite for development and Rollup for production builds.
Everything is an plugin so you can add and remove features as needed
HOWL stack ready with Go specific tooling coming soon
Even with all plugins its very small (see badge above)
Faster than Alpine.js VDOM reactivity and HTMX needs Hyperscript or Alpine to work on most real world projects
DHH would hate it

Cons

No progressive enhancement, you need Javascript enabled. Datastar is for making realtime web apps like dashboards, admin panels, etc. If you need progressive enhancement use Alpine-Ajax or HTMX and stick to just <a/> and <form/> tags. Scripting is a first class citizen in hypermedia systems.
Modern browsers only (no IE11 support)
Have to use custom attributes (data-*) so slightly more verbose but spec compliant always
Have to use SSE if you use the defaults. I little more upfront but allows for faster updates and less code.
No book, but most of hypermedia concepts will port directly over.

Why not just use Vue/React/Svelte?

HTMX Essays are a great place to start.

Why not just use HTMX+Alpine?

I think HTMX is great and I will continue to recommend it for splashes of contents. In general Datastar is geared towards more complex reactive applications, especially in a realtime context.