datastar

Bind UI elements to server-driven signals using data-* attributes.

82|4|Updated Jan 6, 2026

Search Tags:#templates #signals #data-attributes #datastar #backend-actions #frontend-reactivity

Ready to run

npx skills add https://github.com/romshark/datapages --skill datastar-romshark

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: datastar
Source: https://github.com/romshark/datapages/tree/main/.skills/datastar
Command: npx skills add https://github.com/romshark/datapages --skill datastar-romshark

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Datastar enables declarative frontend reactivity by binding UI elements to server-driven signals and actions using data-* attributes.

Core Features & Use Cases

Declarative reactivity with data-* attributes (data-bind, data-on, data-text, data-show, data-class, data-attr, data-signals)
Server-driven UI updates via patching elements and signals using SSE
Backend actions integration (@get, @post, @put, @delete) to trigger server requests from templates
Lightweight templating workflow with Templ and HTML templates
No heavy frontend framework required; works with plain HTML
Use cases across dashboards, interactive forms, and real-time UIs with server-driven state

Quick Start

Create a minimal Datastar skill by adding SKILL.md with a name and description, then include a simple template using data-bind and data-on to demonstrate frontend reactivity.

Frequently Asked Questions about datastar

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

FAQPage Schema

How do I make HTML templates reactive without a heavy frontend framework?▼

Declarative frontend reactivity in HTML templates works by binding UI elements to server-driven signals using data-* attributes, eliminating the need for a heavy frontend framework. Datastar enables this directly within plain HTML.

How do I bind UI elements to backend actions in server-driven templates?▼

You can bind UI elements to backend actions using data attributes like @get, @post, @put, and @delete to trigger server requests directly from templates. Datastar integrates these actions to update elements and signals via SSE.

What is the best way to update frontend state from server events in plain HTML?▼

Updating frontend state from server events in plain HTML is done by patching elements and signals using Server-Sent Events (SSE). Datastar applies these patches to maintain real-time UIs with server-driven state.

Can I use data attributes for reactive forms and dashboards in Templ workflows?▼

Yes, you can use data attributes like data-bind, data-on, and data-show for reactive forms and dashboards. Datastar provides a lightweight templating workflow compatible with Templ and plain HTML templates.

Do I need hardcoded URLs to trigger server requests with data-star attributes?▼

No, you do not need hardcoded URLs to trigger server requests. Datastar requires avoiding hardcoded URLs and leverages its templating language within the datapages context to manage backend actions dynamically.

How does declarative reactivity work with data-bind and data-signals?▼

Declarative reactivity works by using data-bind and data-signals to connect HTML elements to server-driven state. Datastar applies these data-* attributes to automatically patch elements and signals in response to backend events.