Datastar

https://data-star.dev

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.

Community

Has it's on Discord server. Feel free to join and ask questions.

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. It's a little more code 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.

Building

The library itself can be built with https://pnpm.io/ by doing a pnpm i and pnpm build in the packages/library folder.

To run the examples website you will need the following:

• Go
• Taskfile
• Git-LFS

Start with a git lfs checkout in the datastar root folder then run task tools followed by task -w hot.