Datastar
v1.0.0-beta.1
The hypermedia framework.

Datastar helps you build reactive web applications with the simplicity of server-side rendering and the power of a full-stack SPA framework.

Get started Show me some examples!

Include Datastar with a single 12.6 KiB file and start adding reactivity to your frontend immediately. Write your backend in the language of your choice! Official SDKs are available to help you get up and running even faster, with more languages on the way.

Getting started is as easy as adding a single script tag to your HTML.

<script type="module" src="https://cdn.jsdelivr.net/gh/starfederation/datastar@v1.0.0-beta.1/bundles/datastar.js"></script>

Then start adding frontend reactivity using declarative data-* attributes.

<input data-bind-title />
<div data-text="$title.toUpperCase()"></div>
<button data-on-click="@post('/endpoint')">Save</button>

Get involved with the community and help shape the future of Datastar!

At only 12.6 KiB, Datastar is smaller than Alpine.js and htmx, yet it provides the functionality of both libraries combined. The package size is not just a vanity metric. By embracing simplicity, and building on first principles, everything becomes cleaner and leaner. But don’t take our word for it – explore the source code and see for yourself!

Todos Example

If you are seeing this message, please clear your cookies and refresh the page.

We recently updated the site and the old cookies are causing issues.