Tag: Alpine.js

1. Alpine.js Internals: How Reactivity Works Without a Virtual DOM

   Jul 14, 2025

   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.

   Read more

2. window and outside Modifiers for Global Event Listeners | Alpine.js

   Jul 14, 2025

   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.

   Read more

3. Alpine.js Carousel Slider: Touch Support and Keyboard Navigation

   Jul 12, 2025

   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.

   Read more

4. Alpine.js x-collapse: Smooth Accordion Animation Without CSS Hacks

   Jul 11, 2025

   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.

   Read more

5. Alpine.js x-sort: Drag and Drop Sorting Without an External Library

   Jul 9, 2025

   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.

   Read more

6. Pricing Table with Monthly Yearly Toggle in Alpine.js

   Jun 18, 2025

   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.

   Read more

7. Collapsible Sidebar Navigation with Alpine.js

   Jun 17, 2025

   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.

   Read more

8. Testimonial Slider Without External Library with Alpine.js

   Jun 10, 2025

   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.

   Read more

9. Profiling Alpine.js Component Re-Renders

   Jun 10, 2025

   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.

   Read more

10. Dark Mode Toggle with $persist and System Preference

    Jun 8, 2025

    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.

    Read more