Datastar
Datastar is an HTMX-like framework that attempts to minimize the amount of Javascript.
In short:
- Use html attributes for dynamism prefixed with
data-like HTMX - Easy in-document updates similar to ReactJS using Idiomorph.
- Real-time updating via SSE
- Signals for client-side state (but minimize this when possible)
The ethos of Datastar:
- Datastar is for adding dynamicism on a single page, not to provide single-page app styled navigation. This allows you to leverage as much as possible from the web browser itself.
- Most of your complexity and behavior should be driven by the server. The client should hold little to no state.
- Make your requests initiate mutations, but get the rest of the updates through SSE streams.
Refer to the Tao of Datastar.
For more details see the notes:
Areas where Datastar may not be ideal:
- A site where you want something dynamic that persists its state across page navigation. An example would be a Picture-in-Picture (PiP) video to follow the user as they navigate.
- Offline support. Some intermittent network connectivity issues are okay, but it is not designed for long offline uses without a connection to the server.
- “Primary-UI element” pages that are high in interaction complexity (ie. Code Editor, Canvas-based editor, etc.)
Areas where Datastar has potential, but needs more fleshing out:
- Building isolated components. Datastar recommends Web Components. There is a premium feature, Rocket that is exploring this.
- Likewise, there isn’t a prebuilt set of web components available to drop into a Datastar project like Shadcn.
- Styling has been centralizing towards TailwindCSS, which assumes the JS build ecosystem, there is an alpha Stellar as an attempt to address this.
Perfect use cases for Datastar:
- Need less read-acess area for security or compliance reasons (or just being paranoid)
- More dynamic interaction that Javascript-less Multi-Page Apps
- Streaming real time updates
- You have a team more comfortable on the backend than the backend
- Looking for something more than HTMX
- Looking for fast page loads by avoid the multi-megabyte JS bundles for your site
- Side-stepping Typescript/Javascript on the frontend and backend to support SSR