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.3 KiB script tag to your HTML.
<script type="module" src="https://cdn.jsdelivr.net/gh/starfederation/datastar@v1.0.0-beta.8/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 »
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:
<script type="importmap">
{
"imports": {
"datastar": "https://cdn.jsdelivr.net/gh/starfederation/datastar@v1.0.0-beta.8/bundles/datastar.js"
}
}
</script>
<script type="module">
import { Datastar } from 'datastar'
Datastar.load(
// Look ma’, I made a plugin!
)
Datastar.apply(document.body)
</script>