# Datastar
> Use when building web applications with Datastar — the hypermedia framework that drives frontend reactivity from the backend using HTML data-* attributes and Server-Sent Events. Triggers on Datastar, data-star, SSE-driven UI, hypermedia framework, backend-driven frontend, data-signals, data-on, PatchElements, or any Go/Python web app using Datastar SDKs.
- Skill: `danmestas/datastar` (Agent Skill)
- Install (CLI): `npx skillmds@latest add danmestas/datastar`
- Raw SKILL.md: https://api.skillmd.com/api/skills/danmestas/datastar/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: danmestas (https://skillmd.com/u/danmestas)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/danmestas/datastar
---
# Datastar — Hypermedia-First Reactive Framework
Datastar is a lightweight framework for building reactive, real-time web applications by driving frontend logic and state from the backend using HTML `data-*` attributes and Server-Sent Events (SSE). No client-side JavaScript framework required.
**Core idea:** The backend sends HTML fragments and state updates via SSE. The frontend declares behavior with `data-*` attributes. No virtual DOM, no build step, no npm.
## How It Works
```
Browser Server (Go)
│ │
│ data-on:click="@get('/api')" │
│ ──────────────────────────────> │
│ │ ReadSignals(r, &store)
│ │ sse := NewSSE(w, r)
│ SSE: datastar-patch-elements │ sse.PatchElements(html)
│ <────────────────────────────── │ sse.PatchSignals(json)
│ │
│ DOM morphs, signals update │
```
1. User interacts with element → `data-on` fires action (`@get`, `@post`, etc.)
2. Server reads signals from request, processes business logic
3. Server streams SSE events: patch DOM elements, update signals, execute scripts
4. Browser morphs DOM (only changed parts), updates reactive signals
## Go SDK Quick Start
```go
package main
import (
"fmt"
"net/http"
"github.com/starfederation/datastar-go/datastar"
)
type Store struct {
Count int `json:"count"`
}
func main() {
http.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) {
http.ServeFile(w, r, "index.html")
})
http.HandleFunc("/increment", func(w http.ResponseWriter, r *http.Request) {
store := &Store{}
if err := datastar.ReadSignals(r, store); err != nil {
http.Error(w, err.Error(), http.StatusBadRequest)
return
}
store.Count++
sse := datastar.NewSSE(w, r)
sse.PatchElements(
fmt.Sprintf(`%d`, store.Count),
)
sse.MarshalAndPatchSignals(store)
})
http.ListenAndServe(":8080", nil)
}
```
```html
0
```
## Go SDK API
### Reading Client State
```go
// ALWAYS read signals BEFORE creating SSE stream
store := &MyStore{}
if err := datastar.ReadSignals(r, store); err != nil {
http.Error(w, err.Error(), http.StatusBadRequest)
return
}
```
Signals come from query params (GET) or JSON body (POST/PUT/DELETE). Struct tags use `json:"fieldName"`.
### Creating SSE Stream
```go
sse := datastar.NewSSE(w, r)
```
### Patching DOM Elements
```go
// Replace element (default: outer mode — replaces entire element by ID)
sse.PatchElements(`
Hello
`)
// Target specific selector with inner mode
sse.PatchElements(`
New content
`,
datastar.WithSelectorID("container"),
datastar.WithModeInner(),
)
// Append to a list
sse.PatchElements(`
New item
`,
datastar.WithSelector("ul#items"),
datastar.WithModeAppend(),
)
// Prepend
sse.PatchElements(html, datastar.WithModePrepend())
// Before/After element
sse.PatchElements(html, datastar.WithSelector("#target"), datastar.WithModeBefore())
sse.PatchElements(html, datastar.WithSelector("#target"), datastar.WithModeAfter())
```
**Merge modes:** `WithModeOuter()` (default), `WithModeInner()`, `WithModeAppend()`, `WithModePrepend()`, `WithModeBefore()`, `WithModeAfter()`
### Updating Client Signals
```go
// From struct
sse.MarshalAndPatchSignals(store)
// From raw JSON
sse.PatchSignals([]byte(`{"count": 42}`))
```
### Removing Elements
```go
sse.RemoveElements("#temporary")
sse.RemoveElement("#single-element")
```
### Executing JavaScript
```go
sse.ExecuteScript(`console.log("Hello from server")`)
sse.ExecuteScript(`import {toast} from './notify.js'; toast("Done!")`,
datastar.WithExecuteScriptAttributes(`type="module"`),
)
```
### Redirecting
```go
sse.Redirect("/new-page")
```
### Connection State
```go
if !sse.IsClosed() {
// Connection still alive — safe to send
}
```
## HTML Data Attributes Reference
### Signals & State
| Attribute | Purpose | Example |
|-----------|---------|---------|
| `data-signals` | Define/patch reactive signals | `data-signals:count="0"` |
| `data-computed` | Read-only derived signal | `data-computed:total="$price * $qty"` |
| `data-bind` | Two-way binding to input | `` |
| `data-ref` | Reference to DOM element | `data-ref:myDiv` → `$myDiv.tagName` |
### Rendering
| Attribute | Purpose | Example |
|-----------|---------|---------|
| `data-text` | Bind text content | `data-text="$message"` |
| `data-show` | Toggle visibility | `data-show="$isVisible"` |
| `data-class` | Toggle CSS classes | `data-class:active="$isActive"` |
| `data-attr` | Set any HTML attribute | `data-attr:disabled="$loading"` |
| `data-style` | Set inline styles | `data-style:color="$theme"` |
### Events & Actions
| Attribute | Purpose | Example |
|-----------|---------|---------|
| `data-on` | Event listener | `data-on:click="@post('/save')"` |
| `data-on-intersect` | Viewport intersection | `data-on-intersect="@get('/lazy')"` |
| `data-on-interval` | Recurring timer | `data-on-interval__duration.5s="@get('/poll')"` |
| `data-init` | Run on load | `data-init="@get('/initial-data')"` |
| `data-effect` | Run on signal change | `data-effect="console.log($count)"` |
### Backend Actions
```html
```
All actions automatically send current signals to the server.
### Loading Indicators
```html
```
### Event Modifiers
```html
```
### Persistence
```html
```
## Patterns
### Search with Debounce
```html
```
```go
func handleMore(w http.ResponseWriter, r *http.Request) {
store := &struct{ Offset int `json:"offset"` }{}
datastar.ReadSignals(r, store)
sse := datastar.NewSSE(w, r)
sse.PatchElements(
fmt.Sprintf(`
Item %d
`, store.Offset+1),
datastar.WithSelectorID("list"),
datastar.WithModeAppend(),
)
if store.Offset+1 < maxItems {
sse.PatchSignals([]byte(fmt.Sprintf(`{"offset":%d}`, store.Offset+1)))
} else {
sse.RemoveElements("#load-more")
}
}
```
### Form Submission
```html
```
### Live Updates (Polling)
```html
Checking...
```
### Tabs
```html
Home content
Profile content
```
## Key Rules
1. **Read signals BEFORE creating SSE stream.** `ReadSignals(r, &store)` must come before `NewSSE(w, r)`.
2. **Elements need IDs for patching.** Default merge mode is outer — it matches by element ID.
3. **Signals are reactive.** Changing a signal automatically updates all expressions that reference it.
4. **`$` prefix accesses signals.** `$count` reads the `count` signal. All `$name` patterns in expressions become signal reads.
5. **Actions send all signals.** `@get('/api')` automatically includes all signals in the request.
6. **Morphing preserves state.** DOM updates only change what's different — focus, scroll position, form state are preserved.
7. **No build step.** Single `