# Datastar ships as one pinned script tag and three data-* attributes

> A hypermedia framework whose entire install is an 11.89 KiB module loaded from a release tag, with reactivity declared through data-bind, data-text and data-on attributes and everything else living on the documentation site.

**starfederation/datastar** — The hypermedia framework.

- Repository: https://github.com/starfederation/datastar
- Website: https://data-star.dev
- Stars: 5,121 · Forks: 217
- Language: TypeScript
- License: MIT
- Published: 2026-09-23 · Updated: 2026-09-23 · Language: en
- Canonical page: https://hysenlabs.com/projects/starfederation-datastar

## The whole install is one module tag pinned to a release

There is no package manager step in Datastar's README. The entire install is a single script tag, loaded as an ES module from the jsDelivr path that serves the repository's own bundle:

```html
<script type="module" src="https://cdn.jsdelivr.net/gh/starfederation/datastar@v1.0.4/bundles/datastar.js"></script>
```

The size given for it is 11.89 KiB. The version is written into the URL as `@v1.0.4`, so the page you deploy is pinned to a tag rather than to a branch, and the default branch of this repository is `develop`, not `main`. What lands in your page is the file under `bundles/`, a built artifact served straight from the release, so there is no bundler plugin to configure and no compile step of your own. That arrangement is the whole onboarding story, and it also means your version number is a string in an HTML file that someone has to remember to bump.

## Signals come from attributes rather than from script

Reactivity is declared with `data-*` attributes, and the three examples on the front page are the entire vocabulary on display:

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

Read them in order. `data-bind:title` on the input creates a signal named `title` and binds the field to it. `data-text="$title.toUpperCase()"` reads that signal, calls a method on the value, and puts the result into the element's text, so the transform lives in an attribute rather than in a subscription. `data-on:click="@post('/endpoint')"` attaches an event handler whose body is an expression, here a post to a relative path. The state in that model is addressed by name with a dollar sign, and the only name on display is the one an attribute created.

## The README is generated, and its license link points at main

The first line of the README is an HTML comment saying the file is auto-generated and must not be edited, which explains why it is short: it is a set of links rather than documentation. Website, videos, a Discord server, a getting started guide hosted on the documentation site, and the contribution guidelines. One detail in those links is worth knowing before you click. The license badge points at `blob/main/LICENSE.md` while the default branch of the repository is `develop`, and the contribution link points explicitly at `develop`. So the two links disagree about where the canonical branch lives, and the file you end up reading may be from the branch the project does not develop on. Nothing in the page resolves that for you.

## bundles/ is what ships, library/ and sdk/ sit behind it

The repository root explains how that CDN URL is served. `bundles/` holds the built artifact the script tag points at, with `library/` and `sdk/` beside it as the sources, and the rest of the root is the tooling a working project needs: `Taskfile.yml` for running tasks, `biome.json` for formatting and linting, `CHANGELOG.md` for release history, `LICENSE.md`, `CONTRIBUTING.md`, a `.vscode/` directory, `.gitattributes` and `.github/`. For a reader the practical consequence is about where to make a change. The file a browser downloads lives in `bundles/`, so anything you want to alter belongs in `library/` or `sdk/`, and the contribution guidelines the README links to are the route for reporting a problem rather than patching the served artifact yourself.

## The endpoint in the example is a string and nothing more

The endpoint in the example is a string and nothing more. The button on the front page posts to `'/endpoint'`, and the page stops there. No status handling, no retry behavior, no error state, no request payload format and no server component appear anywhere in the README, and the guide that would cover them is hosted on the documentation site. The gap is the same on the reactive side: the examples show one bound signal and one text transform, with nothing about loops, conditionals, or how the signal store is inspected from outside the attributes, and no mention of what a failed expression does to the element it was bound to. This is a reasonable way to advertise a framework, and an unreasonable way to learn it. Read the getting started guide before wiring a real endpoint, because the front page gives you the shape of the call and none of the contract behind it.

## Three 1.0.x releases, developed on develop

The release record is short and recent: v1.0.2 on 2026-06-02, v1.0.3 on 2026-08-27 and v1.0.4 on 2026-09-21, with the last push to the default branch dated the same day as that newest tag. That is a project shipping from a 1.x line rather than sitting before a first release. The project describes itself as a lightweight framework for building everything from simple sites to real-time collaborative web applications, written in TypeScript under MIT terms, and it links its guide, videos and Discord from the same page. When you adopt it, follow the README and pin the version in the script tag: the tag is the only durable reference point the front page offers, and the branch names on that page do not agree with each other.

## Conclusion

Adopt Datastar if you want reactive behavior from declarative `data-*` attributes and a single script tag you can pin to a release, and if you are willing to learn the request handling from the documentation site rather than from the front page. Do not expect a server runtime, a build step or a component library from this project's own README, because none of the three appear there. Before you start, pin the script tag the way the README does, and read the getting started guide to find out what `@post` expects, since the front page shows the endpoint only as the string `/endpoint`.

## FAQ

### What is Datastar and how do I start using it?

Datastar is described as a lightweight hypermedia framework for building anything from simple sites to real-time collaborative web applications. The README's entire setup is one script tag of 11.89 KiB loaded as a module, after which reactivity is added through declarative data-* attributes. A getting started guide is hosted on the project documentation site.

### How do I add reactivity with Datastar data attributes?

Bind an input with an attribute such as data-bind:title, read the resulting signal in an expression such as data-text="$title.toUpperCase()", and attach behavior with an event attribute such as data-on:click="@post('/endpoint')". The signals are addressed by name with a dollar sign.

### How large is the Datastar script and how should I load it?

The README gives a single 11.89 KiB script tag of type module, served from the jsDelivr path for the repository bundle with the version written into the URL as @v1.0.4. Pinning to a release tag is what the README shows, and the file it serves is the built artifact under bundles/.

### What is in the Datastar repository and how do I contribute?

The root holds bundles/, library/ and sdk/ alongside Taskfile.yml, biome.json, CHANGELOG.md, LICENSE.md, CONTRIBUTING.md and .github/. The README is marked auto-generated with a do not edit comment, so changes go through the contribution guidelines it links on the develop branch, and support runs through the linked Discord server.

## Sources

- [License: MIT](https://github.com/starfederation/datastar/blob/develop/LICENSE)
- [Project website](https://data-star.dev)
- [README](https://github.com/starfederation/datastar/blob/develop/README.md)
- [Releases](https://github.com/starfederation/datastar/releases)
- [starfederation/datastar on GitHub](https://github.com/starfederation/datastar)

---

Hysen Labs editorial analysis, written from the project's own repository and release notes. Cite the canonical page: https://hysenlabs.com/projects/starfederation-datastar