📦 Installation

NPM
npm install @mbolli/datastar-attribute-prop
Setup
<script type="importmap">
{
  "imports": {
    "datastar": "https://cdn.jsdelivr.net/gh/starfederation/datastar@v1.0.0-RC.6/bundles/datastar.js"
  }
}
</script>
<script type="module" src="https://cdn.jsdelivr.net/npm/@mbolli/datastar-attribute-prop@1/dist/index.js"></script>

📊 Live State

Signals

        

    


    

        

            
⚡ Datastar Prop Plugin

            
Interactive demo showcasing property binding with reactive signals

            

                GitHub
                npm
                Datastar Docs
            

        


    
    

        
Test 1: Single Property - Input Value

        
Uses data-prop:value to bind the value property.

        
        

            
            
            
        

    


    
    

        
Test 2: Single Property - Disabled State

        
Uses data-prop:disabled to control button state.


        

            
            
        

    


    
    

        
Test 3: Multiple Properties

        
Uses data-prop without a key to set multiple properties at once.

        
        

            
            
            

                
                
                
            

        

    


    
    

        
Test 4: Different Input Types

        
Testing property binding with various input types.

        
        

            
            


            
            
        

    


    
    

        
Test 5: Select All Checkboxes

        
Use an "all" checkbox to toggle multiple checkboxes at once using @setAll action. Uses event delegation with a single change handler on the parent.

        

            ℹ️ Note: For this pattern, using data-bind with data-effect would be much simpler than data-prop. See the bulk update example in the Datastar docs for a cleaner implementation.
        

        
        

            

                
                
                

                    
                    
                    
                    
                    
                    
                    
                

                
                

                    
                         of 4 selected
                    
                    💡 Click "Select All" to toggle everything
                

            

        

    


    
    

        
Test 6: Complex Properties

        
Setting custom properties on elements.