Datastar Attributes Demo

This page demonstrates all the Datastar attributes available in gomponents-datastar.

Signals

Signals are reactive state variables. Click the buttons to modify them.

Counter Example

clicks

All Signals (JSON)

Filtered Signals (counter only)
Single Signals
The key form of data-signals patches a single signal, and reads the signal name from the attribute key. Unlike the value form, it applies the casing modifiers to that name.
Default Camel Case
data-signals:my-count="1" creates $myCount.
Value: 
Snake Case
data-signals:my-total__case.snake="2" creates $my_total.
Value: 
Text Binding
The data-text attribute binds text content to an expression.
Hello, !
Two-Way Data Binding
The data-bind attribute creates two-way data binding between signals and form elements.
Text Input
Value: 
Select
Selected: 
Textarea
Message length: 
Bind Modifiers
Passing modifiers to data-bind emits the key form of the attribute, so Datastar reads the signal name from the attribute key instead of its value.
Bind to a Property
data-bind:accepted__prop.checked binds the signal to the checked property.
Accepted: 
Choose the Sync Event
data-bind:search__event.change syncs on change only, so the signal updates when the input loses focus or you press Enter, not on every keystroke.
Search: 
Show/Hide Elements
The data-show attribute shows or hides elements based on an expression.
👋 This element is conditionally visible!
Visible: 
Dynamic Classes
The data-class attribute adds or removes classes based on expressions.
This text changes style when highlighted
Dynamic Attributes
The data-attr attribute sets attribute values based on expressions.
Clicks: /10
Button disabled: 
Dynamic Styles
The data-style attribute sets inline styles based on expressions.
This text changes style based on the counter
Counter: 
Computed Signals
The data-computed attribute creates read-only signals based on expressions.
Total: $
Effects
The data-effect attribute executes expressions when signals change.
Open the browser console and change the counter to see the effect in action.
Initialization
The data-init attribute runs expressions when elements are loaded.
Check the browser console to see when this section initialized.
Event Listeners
The data-on attribute attaches event listeners to elements.
Click Event
Clicks: 
Mouse Events
Hover over me
Hovering: 
Debounced Input
Debounced value: 
Intervals
The data-on-interval attribute runs expressions at regular intervals.
Seconds elapsed: 
Intersection Observer
The data-on-intersect attribute runs expressions when elements enter the viewport.
Scroll down to see the intersection observer in action...
🎯 I'll highlight when you scroll to me!
Intersected: 
Element References
The data-ref attribute creates signals that reference DOM elements.
I am a referenced element
Preserve Attributes
The data-preserve-attr attribute preserves attribute values during DOM morphing.
Click to expand/collapse
This content is inside a details element. The 'open' attribute is preserved during DOM updates.
Ignore Elements
The data-ignore attribute tells Datastar to ignore an element and its descendants.
This element is ignored by Datastar. Any data-* attributes here won't work.
Ignore Morphing
The data-ignore-morph attribute prevents elements from being morphed during DOM updates.
This element will not be morphed during DOM updates.
Signal Patch Events
The data-on-signal-patch attribute runs expressions when signals are patched.
Open the console and change the counter to see signal patch events.
Built with gomponents and Datastar