Overview
Attribute Plugins#
Attribute plugins are data-* attributes that add reactive behavior to HTML elements.
Core Attributes#
| Attribute | Description |
|---|---|
data-signals |
Merges one or more signals into the existing signals. |
data-computed |
Creates a read-only signal computed from an expression. |
data-star-ignore |
Ignores an element and its descendants when processing. |
DOM Attributes#
| Attribute | Description |
|---|---|
data-attr |
Sets any HTML attribute value using expressions. |
data-bind |
Creates two-way data binding between a signal and an element’s value. |
data-class |
Adds or removes CSS classes based on expressions. |
data-on |
Attaches event listeners that execute expressions. |
data-persist |
Persists signals in Local Storage or Session Storage. |
data-ref |
Creates a signal reference to the DOM element. |
data-replace-url |
Replaces the URL in the browser without page reload. |
data-show |
Shows or hides elements based on expressions. |
data-text |
Binds text content of an element to an expression. |
Backend Attributes#
| Attribute | Description |
|---|---|
data-indicator |
Creates signals that indicate when SSE requests are in flight. |
Browser Attributes#
| Attribute | Description |
|---|---|
data-custom-validity |
Adds custom validation to elements. |
data-on-intersect |
Runs expressions when elements intersect the viewport. |
data-on-interval |
Runs expressions at regular intervals. |
data-on-load |
Runs expressions when elements are loaded into the DOM. |
data-on-raf |
Runs expressions on requestAnimationFrame events. |
data-on-signal-change |
Runs expressions when signals change. |
data-scroll-into-view |
Scrolls elements into view with various options. |
data-view-transition |
Sets view-transition-name for View Transitions API. |
View the attribute plugins reference
Action Plugins#
Action plugins are used in Datastar expressions to perform specific actions.
| Action | Description |
|---|---|
@get() |
Sends a GET request to the backend and merges the response. |
@post() |
Sends a POST request to the backend and merges the response. |
@put() |
Sends a PUT request to the backend and merges the response. |
@patch() |
Sends a PATCH request to the backend and merges the response. |
@delete() |
Sends a DELETE request to the backend and merges the response. |
Browser Actions#
| Action | Description |
|---|---|
@clipboard() |
Copies the provided evaluated expression to the clipboard. |
Utility Actions#
| Action | Description |
|---|---|
@setAll() |
Sets all matching signals to a provided value. |
@toggleAll() |
Toggles all matching signal values. |
@fit() |
Makes a value linearly interpolate. |
View the action plugins reference
Server-Sent Events#
Datastar uses Server-Sent Events (SSE) to communicate from the server to the client.
| Event Type | Description |
|---|---|
datastar-merge-fragments |
Merges HTML fragments into the DOM. |
datastar-merge-signals |
Updates signals with new values. |
datastar-remove-fragments |
Removes HTML fragments matching selectors. |
datastar-remove-signals |
Removes signals matching specific paths. |
datastar-execute-script |
Executes JavaScript in the browser. |
View the SSE events reference
SDKs#
Officially supported SDKs for generating Datastar-specific SSE events:
- Clojure
- C# (.NET)
- Go
- Haskell
- Java
- PHP (with Laravel and Craft CMS packages)
- Python
- Rust
- Ruby
- TypeScript
- Zig
View the SDK reference
Security#
Security guidelines for using Datastar expressions safely:
| Consideration | Description |
|---|---|
| Escape User Input | Always escape user input to prevent XSS attacks when using Datastar expressions. |
| Avoid Sensitive Data | Signal values are visible in source code and can be modified, avoid leaking sensitive data. |
| Ignore Unsafe Input | Use data-star-ignore to ignore unsafe content that cannot be escaped. |
| Content Security Policy | Requires ‘unsafe-eval’ for script sources since Datastar evaluates expressions using IIFE. |
View the security reference
Custom Builds#
Datastar is built using a modular architecture that allows you to create custom builds with only the plugins you need, useful for reducing the framework’s footprint.
View the custom builds reference