skills.rest
cbeauhilton
cbeauhiltonCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

Datastar

Stream server-rendered HTML updates to the browser via SSE with declarative data-* attributes.

Updated Aug 23, 2026
Search Tags:#server-rendered#hypermedia#sse#cqrs#real-time-ui#datastar#dom-morphing
One-click install
npx skills add https://github.com/cbeauhilton/mu --skill datastar
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: Datastar
Source: https://github.com/cbeauhilton/mu/tree/main/home/dev/pai-skills/Datastar
Command: npx skills add https://github.com/cbeauhilton/mu --skill datastar

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Datastar solves the complexity of building real-time, interactive web UIs by keeping state on the server and streaming HTML to the browser via SSE. It eliminates the need for client-side state management and heavy frontend frameworks.

Core Features & Use Cases

  • Server-rendered HTML delivered over SSE for real-time updates
  • Declarative attributes (data-signals, data-on, data-bind) to drive UI without custom JavaScript
  • CQRS-style commands with @get/@post and morphing-based DOM updates
  • Use cases include live dashboards, collaborative forms, and dynamic forms with real-time validation

Quick Start

Write a simple Datastar-enabled page that defines a data-init stream and a patch-ready HTML template, then open the page to see real-time updates.

Frequently Asked Questions about Datastar

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build real-time UIs with server-rendered HTML and SSE?▼

Real-time UIs using server-rendered HTML and SSE are built by streaming HTML fragments from the server to the browser, using declarative data-* attributes to drive updates without heavy client-side frameworks.

How does DOM morphing work with SSE streams?▼

DOM morphing with SSE streams works by applying server-rendered HTML patches directly to the browser DOM, efficiently updating only changed elements through declarative attributes rather than replacing the entire page.

What is the best way to maintain server-side state for interactive forms?▼

Maintaining server-side state for interactive forms is best achieved by keeping the server as the source of truth and streaming UI updates via SSE, eliminating the need for client-side state management.

Can I update live dashboards without writing custom JavaScript?▼

Live dashboards can be updated without custom JavaScript by using declarative attributes like data-signals, data-on, and data-bind to drive UI interactions and receive real-time SSE updates.

Do I need a frontend framework for CQRS-style commands and dynamic forms?▼

A frontend framework is not needed for CQRS-style commands and dynamic forms; server-rendered HTML delivered over SSE handles real-time validation and updates using command-oriented actions and DOM patching.

What are the limitations of using SSE for real-time synchronization?▼

Using SSE for real-time synchronization requires a server-as-the-source-of-truth architecture and is limited to server-to-client streaming, meaning it does not natively handle bidirectional communication without additional HTTP requests.

Related Skills

Explore More Software Engineering Skills→
danielmichaelsdanielmichaels

datastar

Design backend-driven UIs with Datastar for SSE DOM updates in Go web apps.

Community
Advanced
joshyorkojoshyorko

37signals-turbo

Implement Turbo Streams, Turbo Frames, and morphing in Rails 8+ apps.

Community
Advanced
VimCommandoVimCommando
5

datastar

Develop backend-driven web applications using Server-Sent Events and reactive signals.

Community
Advanced
danmestasdanmestas
4

datastar

Stream backend-driven UI updates to Go or Python web apps via SSE.

Community
Advanced