@mbolli/datastar-attribute-prop

A Datastar plugin that provides property binding to sync element properties with reactive signals.

About

Datastar is a hypermedia-focused framework that brings reactive signals and declarative DOM manipulation to your HTML. It includes a built-in data-attr plugin for setting HTML attributes, but HTML attributes and DOM properties are not the same thing.

While data-attr works great for HTML attributes (like class, id, href), many DOM interactions require setting properties directly on elements instead. For example:

• Input value property (vs. the value attribute which only sets initial value)
• Checkbox checked property (vs. the checked attribute which only sets initial state)
• Element disabled property for real-time form control
• Custom properties on web components

This plugin fills that gap by providing a data-prop attribute that binds reactive signals directly to element properties. Its two key advantages over the alternatives built into Datastar:

• Arbitrary expressions — unlike data-bind __prop, the value is a full JS expression, not just a signal name: data-prop:checked="$items.includes('x') || $count >= 4"
• Multiple properties at once — a single attribute can set several properties via object syntax, without the verbosity of multiple data-effect statements

	data-prop	data-attr	data-effect	data-bind __prop
Targets	DOM properties	HTML attributes	DOM properties	DOM properties
Binding direction	One-way (signal → property)	One-way (signal → attribute)	One-way (signal → property)	Two-way (signal ↔ property)
Syntax	data-prop:volume="$vol" data-prop="{ volume: $vol, muted: $muted }"	data-attr:disabled="$isDisabled"	data-effect="el.volume = $vol"	data-bind:vol__prop.volume
Multiple at once	✅ via object syntax	❌ one at a time	Manual (multi-statement)	❌ one at a time
Arbitrary expressions	✅	✅	✅	❌ signal name only
Use case	Concise property push	HTML attribute binding	Arbitrary JS side-effects	Two-way on custom/native elements

Installation

npm install @mbolli/datastar-attribute-prop

Demo

View Interactive Demo →

Usage

This plugin requires an import map to resolve the datastar module. Set up your HTML like this:

<script type="importmap">
{
  "imports": {
    "datastar": "https://cdn.jsdelivr.net/gh/starfederation/datastar@v1.0.1/bundles/datastar.js"
  }
}
</script>
<script type="module">
  // Import the plugin - it will auto-register with datastar
  import 'https://cdn.jsdelivr.net/npm/@mbolli/datastar-attribute-prop@1/dist/index.js';
</script>

Note: Using @1 will automatically use the latest v1.x.x version.

What it does

This plugin adds a prop attribute to Datastar that allows you to bind reactive signals directly to element properties (not HTML attributes).

Single Property Binding

<input data-prop:value="$mySignal" />

This binds the value property of the input element to the mySignal signal.

Multiple Property Binding

<input data-prop="{ value: $mySignal, disabled: $isDisabled }" />

This binds multiple properties at once using an object.

Testing

Run the automated tests:

pnpm test

Or open index.html locally in a browser to interactively test the plugin with Datastar. The demo includes examples of:

• Single property binding (value, disabled, checked)
• Multiple property binding
• Different input types
• Dynamic updates

Development & Releases

This project uses automated releases via GitHub Actions. When you push to main:

1. Tests run automatically - Build and tests must pass
2. Version bumping - Add to your commit message:
   • [major] for breaking changes (1.0.0 → 2.0.0)
   • [minor] for new features (1.0.0 → 1.1.0)
   • Default: patch for bug fixes (1.0.0 → 1.0.1)
3. Automatic publishing - Package is published to npm
4. GitHub Release created - With auto-generated release notes

License

MIT