x-data - Component State in Alpine.js
From the Alpine.js cheat sheet · Getting Started · verified Jul 2026
x-data - Component State
Define reactive data for your Alpine component
html
<div x-data="{ open: false, count: 0 }">
<button @click="open = !open">Toggle</button>
<button @click="count++">Increment</button>
<div x-show="open">
Content is visible! Count: <span x-text="count"></span>
</div>
</div>✅ x-data creates a new Alpine component scope
💡 All child elements can access the reactive data
🔍 Use functions for reusable component logic
⚡ Changes to data automatically update the DOM
x-datastatereactivecomponent