Skip to content

delaneyj/datastar

Repository files navigation

Datastar

Website

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.

Not complete, there be 🐉

Size

Community

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

Features

Pros

  • 💯 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

  • Syntax is still very much in flux, but will stabilize with usage
  • 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.
  • Less memes and tweets
  • No tests yet (but actively being used on an internal project). Plan to use Vitest+Playwright soon
  • Documentation is on its way
  • 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?

There was a bit of a rant here before. TL;DR tried to show HTMX v2 could do all these things and it wasn't accepted by the community. I think HTMX is great and I will continue to recommend it. In general I think the some of the choices are throwing the baby out with the bathwater when it comes to things like Vite/TS/etc.