@sudodevnull/datastar
TypeScript icon, indicating that this package has built-in type declarations

0.14.2 • Public • Published

Datastar

https://data-star.dev

Star History Chart

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.

Readme

Keywords

none

Package Sidebar

Install

npm i @sudodevnull/datastar

Weekly Downloads

237

Version

0.14.2

License

none

Unpacked Size

612 kB

Total Files

9

Last publish

Collaborators

  • sudodevnull