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 12KiB script tag to your HTML.

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

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

<input data-bind-title type="text">
<div data-text="title.value.toUpperCase()"></div>
<button data-on-click="sse('/endpoint', {method: 'post'})">Save</button>

Visit the Datastar Website »

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:

<script type="importmap">
{
    "imports": {
      "datastar": "https://cdn.jsdelivr.net/gh/starfederation/datastar/bundles/datastar-core.js"
    }
}
</script>
<script type="module">
    import { Datastar } from 'datastar'

    Datastar.load(
        // I can make my own plugins!
    )
    </script>