Tag: Alpine.js

1. Building a Vertical Timeline Component with Alpine.js

   Apr 16, 2025

   A vertical timeline component displays events chronologically along a vertical line and reveals steps as the user scrolls. With CSS Grid for the layout and Alpine.js x-intersect for scroll-reveal animations, a flexible timeline component emerges without loading a dedicated timeline library.

   Read more

2. x-show vs. x-if in Alpine.js: When to Use Which

   Apr 9, 2025

   x-show and template x-if both solve conditional rendering, but with fundamentally different DOM behavior. Knowing the differences in lifecycle hooks, transitions and performance lets you make the choice deliberately instead of randomly, avoiding unnecessary re-initializations or bloated DOM.

   Read more

3. Alpine.js v3: The Complete Directives Reference

   Apr 6, 2025

   Alpine.js v3 ships with 15 directives, 6 magic properties, and 3 global methods. Anyone who knows all of them and understands where each one belongs can build interactive UIs without a build step, without a virtual DOM, and without the complexity of large frameworks: reactive, maintainable, and written directly in HTML.

   Read more

4. x-for with key: Stable List Updates in Alpine.js

   Apr 6, 2025

   Without the key modifier, Alpine confuses DOM elements with the wrong record in x-for lists as soon as entries are inserted, removed, or reordered. A stable, unique key solves this diffing problem and prevents focus jumps, wrong animations, and swapped form state.

   Read more

5. Building a Mini Cart Preview with Alpine.js in Hyvä

   Mar 25, 2025

   A mini cart preview shows the customer instantly what is in the cart, without leaving the product page. With Alpine.js this flyout can be built as a lean x-data component that catches section data events, changes quantities live and does all of this without jQuery or extra libraries.

   Read more

6. Async Server Validation While Typing with Alpine.js

   Mar 12, 2025

   A username or coupon code cannot be checked client side because the answer depends on the server's current data. Server validation while typing therefore needs debounce, clean request cancellation, and a clear loading state, so Alpine.js never shows a stale response and the server is not queried on every single keystroke.

   Read more

7. Alpine.js $nextTick: Waiting for DOM Updates Without setTimeout

   Mar 8, 2025

   Using setTimeout(fn, 0) as a workaround for DOM timing problems is a code smell in Alpine.js projects. $nextTick is the clean alternative: it waits precisely for the next render pass to finish, not for an arbitrary number of milliseconds.

   Read more

8. Visualize Data with Alpine.js Without Chart.js

   Mar 6, 2025

   Chart.js adds 200 KB to your JavaScript bundle. D3.js is a learning curve of its own. For most dashboard widgets in Hyva themes, Alpine.js and native SVG are enough, complete with tooltips, animations, and full accessibility.

   Read more

9. Animated Number Counter: Smooth Without GSAP Using Alpine.js

   Feb 25, 2025

   Animated number counters are everywhere on landing pages, statistics sections, and dashboards. Pulling in GSAP or CountUp.js for this loads unnecessary kilobytes. With Alpine.js, requestAnimationFrame, and the IntersectionObserver, you get a smooth, scroll-triggered counter, completely without external libraries.

   Read more

10. Using x-cloak Correctly: Preventing FOUC in Alpine.js

    Feb 14, 2025

    Anyone shipping Alpine.js without x-cloak risks a brief flash of unstyled directives during page load. x-cloak closes exactly this gap between HTML parsing and Alpine initialization with a single CSS rule and an attribute that reliably disappears once the component is ready.

    Read more