Datastar Pro

Datastar Pro adds functionality to the free open source Datastar framework. All pro features are available under a commercial license that helps fund the open source work of Star Federation.

License #

Datastar Pro is a lifetime license at a one-time cost. You can use pro features in any number of commercial or non-commercial projects, and you will receive access to updates and any additional pro features that are released in future. By purchasing a license, you are directly supporting the development of the Datastar framework.

Pricing #

Solo

$299

For a single developer.
Lifetime access to all Pro features.
Developer support.

Buy Now

Team

$999

For product teams and agencies with up to 25 employees.
Lifetime access to all Pro features.
Developer support.

Buy Now

Enterprise

For businesses and organisations with over 25 employees.
Lifetime access to all Pro features.
Dedicated support.
Custom licensing.

Contact Sales

Pro Features #

Attributes #

data-animate - Animates element attributes over time.
data-custom-validity - Adds custom validity to an element.
data-on-raf - Runs an expression on every animation frame.
data-on-resize - Runs an expression on element resize.
data-persist - Persists signals in local storage.
data-query-string - Syncs query string params with signal values.
data-replace-url - Replaces the URL in the browser.
data-scroll-into-view - Scrolls an element into view.
data-view-transition - Sets view-transition-name styles.

Actions #

@clipboard() - Copies text to the clipboard.
@fit() - Linear interpolates a value.

Events #

upload-progress - Real-time upload progress monitoring for file uploads.

Datastar Inspector #

The Datastar Inspector is a debugging tool that allows you to inspect and filter current signals, and view signal patch events and SSE events in real-time.

Written as a web component, the Datastar Inspector is useful when developing Datastar applications, and can be used as a starting point for you to build your own custom debugging tools.

Current signals tab — The current signals tab shows all signal values. Signals can be filtered using regular expressions or wildcard syntax, and viewed in JSON or table format.

Signal patches tab — The signal patches tab shows all signal patch events originating from both the frontend and backend.

The SSE events tab shows all SSE events originating from the backend.

Bundler #

The bundler allows you to create custom bundles, including only the plugins you need. This can be useful when you only need a subset of the Datastar framework, or when you want to intentionally restrict what plugins your development team has access to.

The bundler also allows you to create a custom aliased bundle, in which the syntax of Datastar attributes becomes data-{alias}-*. This can help avoid conflicts with other frameworks that use data attributes.

Stellar CSS #

Stellar CSS is a lightweight CSS framework that provides a configurable design system in the form of CSS variables with no build step. It replaces the need for frameworks like Tailwind CSS that tend to bloat markup with utlity classes, and Open Props that are non-configurable.

Stellar CSS is still a work-in-progress (it’s being actively used on this site) and will become available as a pro feature in the future.