Datastar

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.

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

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

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

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

Visit the Datastar Website »

Watch the Videos »

Join the Discord Server »

Getting Started

Read the Getting Started Guide »

Contributing

Read the Contribution Guidelines »

Custom Plugins

You can manually add your own plugins to the core:

1<script type="importmap">
2{
3    "imports": {
4      "datastar": "https://cdn.jsdelivr.net/gh/starfederation/datastar@v1.0.0-beta.11/bundles/datastar.js"
5    }
6}
7</script>
8<script type="module">
9    import { load } from 'datastar'
10
11    load(
12        // Look ma’, I made a plugin!
13    )
14</script>