Page 7 - Alpine.js

Alpine.js needs no virtual DOM, no compiler and no build step to produce reactive components. Instead, it relies on JavaScript proxies, reactive effects and MutationObserver, a model that turns out to be surprisingly elegant and easy to follow once you see how the pieces fit together.

The Alpine.js window modifier registers listeners directly on the window object and cleans them up automatically once the component leaves the DOM. Combined with @click.outside, it powers dropdowns, modals and global keyboard shortcuts without a single manual addEventListener or removeEventListener call in component code.

Swiper.js and Slick arrive with hundreds of kilobytes and their own JavaScript ecosystems. A production ready carousel slider for Hyva needs neither: Alpine.js alone is enough for touch, keyboard, auto-play and ARIA.

The max-height trick works, but it never really looks fluid. Alpine.js x-collapse animates the actual content height, reacts to dynamic content and integrates seamlessly into Alpine state, without a single line of custom JavaScript.

x-sort brings native drag and drop sorting to Alpine.js, without SortableJS, without jQuery UI, and without external dependencies. Sortable lists, moving items across groups, drag handles, and server synchronization can all be built with a handful of HTML attributes.

A pricing table with a toggle between monthly and yearly billing is standard for SaaS products and subscription models, because it makes the yearly discount directly visible and eases the purchase decision. With Alpine.js you build a pricing table that recalculates amounts reactively, shows discount badges and highlights the recommended plan, entirely without a page reload and without server side logic in the frontend.

A collapsible sidebar navigation is one of the most common layout elements in dashboards and admin interfaces. With Alpine.js, the complete state, from opening and closing to browser persistence and a mobile overlay variant, fits into one compact component, with no need to load React or Vue.

A testimonial slider shows customer quotes in a compact, rotating form and is therefore a central social proof element on product and landing pages. With Alpine.js you can build a testimonial slider with autoplay, touch swipe, keyboard control and bullet indicators in a handful of lines of code, entirely without Swiper, Slick or any other external slider library.

Alpine.js re-renders work fundamentally differently than in React or Vue, because there is no virtual DOM comparison, instead every reactive property is tracked individually through a proxy. This exact granularity is why profiling matters: wasteful effect runs often go unnoticed until a complex component visibly stutters and the precise cause needs to be found.

A dark mode that resets on the next visit, or one that briefly flashes light before turning dark on load: those are the two most common mistakes. Alpine.js solves both. $persist stores the user preference permanently in localStorage, and a blocking script placed before Alpine.js prevents the flash of wrong theme.