Datastar

Overview

Datastar is a lightweight frontend framework that enables backend-driven, interactive UIs through a hypermedia-first approach. It combines backend reactivity (similar to htmx) with frontend reactivity (like Alpine.js) using standard HTML data-* attributes.

When to Use This Skill

Use this skill when:

• Adding frontend interactivity to server-rendered HTML
• Building reactive UIs driven by backend state
• Using Datastar with gomponents in Go applications
• Working with Server-Sent Events (SSE) for real-time updates

Prerequisite: When using Datastar with Go, also use the gomponents skill for HTML component patterns.

Installation

Browser (CDN)

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

Go (gomponents-datastar)

go get maragu.dev/gomponents-datastar

---

Part 1: Datastar Fundamentals

Core Concepts

Signals

Signals are reactive state containers. When a signal's value changes, all dependent expressions automatically update.

<div data-signals="{count: 0}">
    <span data-text="$count"></span>
    <button data-on:click="$count++">Increment</button>
</div>

• Signal names are prefixed with $ in expressions
• Setting a signal to null or undefined removes it
• Use dot-notation for nested signals: $user.name

DOM Patching

Datastar uses morphing to update only changed DOM parts while preserving state. The backend sends HTML fragments that patch into the existing page.

Attributes Reference

State Management

data-signals - Initialize reactive signals:

<div data-signals="{name: 'World', count: 0}"></div>

data-computed - Create derived read-only signals:

<div data-computed="{doubled: $count * 2}"></div>

data-init - Run expressions when element loads:

<div data-init="console.log('Loaded')"></div>

Data Binding

data-text - Bind t...