Alpine.js is the only JavaScript framework used in a Hyvä theme - and it's deliberately tiny (well under 10 KB gzipped). Instead of a dedicated build step for components, a handful of HTML attributes is enough to make an element interactive.

x-data: the starting point of every component

x-data marks an element as an Alpine component and defines its initial state as a JavaScript object. Everything inside that element (and its children) has access to that state.

<div x-data="{ open: false }">
    <button x-on:click="open = !open">Menu</button>
    <div x-show="open">Menu content</div>
</div>

x-show: showing and hiding elements

x-show shows or hides an element based on an expression that evaluates to true or false - technically via CSS display: none, so the element stays in the DOM, just invisible. That's different from x-if, which actually removes the element from the DOM (relevant when the element holds, say, expensive content or forms with their own state).

x-on: reacting to events

x-on:click (also commonly written as the shorthand @click) reacts to DOM events. Practically any native browser event works: click, submit, keydown, mouseenter, and many more.

<button @click="activeCategory = 'development'">Development</button>

<!-- @ is shorthand for x-on: -->
<form @submit.prevent="submitted = true">...</form>

The .prevent modifier internally calls event.preventDefault() - handy for forms that should be handled via Alpine instead of a classic page reload.

x-model: two-way data binding for form fields

x-model connects a form field directly to a state variable - changes in the field automatically update the state, and vice versa, a change to the state automatically updates the field.

<div x-data="{ search: '' }">
    <input type="text" x-model="search" placeholder="Search...">
    <p x-show="search.length > 0">Searching for: <span x-text="search"></span></p>
</div>

x-text sets an element's text content from an expression (similar to x-show, but for text instead of visibility). For HTML content there's x-html - but just like unguarded PHP escaping, that should be used carefully, since it inserts raw HTML.

Why no separate JS bundle is needed

Alpine is already bundled as part of the Hyvä theme - you don't need to install or bundle it yourself. Custom component logic usually lives directly inside the x-data attribute, or in a small inline <script> block (with CSP registration, see chapter 9) - for most storefront interactions, that's entirely sufficient, with no need to create your own .js file.