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 12.6 KiB script tag to your HTML.
<script type="module" src="https://cdn.jsdelivr.net/gh/starfederation/[email protected]/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>Visit the Datastar Website »
Join the Discord Server »
Read the Getting Started Guide »
Read the Contribution Guidelines »
You can manually add your own plugins to the core:
<script type="importmap">
{
"imports": {
"datastar": "https://cdn.jsdelivr.net/gh/starfederation/[email protected]/bundles/datastar.js"
}
}
</script>
<script type="module">
import { Datastar } from 'datastar'
Datastar.load(
// Look ma’, I made a plugin!
)
</script>