Alpine.js: Guides and Practical Know-how | Page 8 | mironsoft Blog
Alpine.js
-
Oct 1, 2025
Viewport breakpoints are not enough: components need to react to their own size, not to the window width. x-resize brings the ResizeObserver into Alpine.js declaratively, without a single line of boilerplate code.
-
Sep 29, 2025
Alpine.js components often look interactive and modern, yet remain unusable for screen reader and keyboard users whenever ARIA attributes are not reactively wired to component state. This article shows, hands on, how to correctly use x-bind:aria-expanded, x-on:keydown and clean focus management, then builds a fully accessible accordion and a dropdown menu from scratch, including keyboard navigation and screen reader support.
-
Sep 24, 2025
A mobile navigation that only toggles visibility is not enough: without a state model for nested categories, without a focus trap and without scroll lock, the off-canvas menu quickly becomes a dead end for keyboard and screen reader users. This article shows how to build the mobile navigation of a Hyvä theme as a self-contained Alpine component, with a state stack for category levels, x-transition for the slide-in panel, a focus trap, ARIA attributes and performant CSS transform animation instead of layout thrashing.
-
Sep 19, 2025
Turbo replaces full page changes with fast partial updates, yet client-side UI state can easily get lost on every Turbo Frame render. Alpine.js and Turbo/Hotwire together deliver exactly what each approach lacks on its own: server-side navigation without a reload, plus reliably re-initialized, local reactivity in every component.
-
Sep 16, 2025
Prop drilling and global variables are signs of tight coupling. Custom Events offer a native DOM solution: components send events, others listen, without a direct reference to each other, without a framework, and with full TypeScript support.
-
Sep 9, 2025
External libraries like typed.js add 15 KB for an animation that can be built entirely with Alpine.js and 30 lines of JavaScript. The typewriter effect with variable typing speed, realistic deletion and multiple text phrases looping continuously, without jQuery and without an NPM package.
-
Sep 7, 2025
Anyone validating a checkout form with shipping and billing addresses, payment data, and contact fields against a single global error object quickly loses the overview. A well designed validation group per business section makes errors visible per area, keeps Alpine components maintainable, and helps screen reader users orient themselves inside the form.
-
Sep 3, 2025
Every click that only shows a visible effect after a server round trip feels sluggish to users, even when the request objectively only takes two hundred milliseconds. Optimistic UI updates solve this perception problem by having the Alpine state show the expected change immediately, with the actual server request only running afterward in the background. Using a like button as an example, this article shows how to implement such a pattern cleanly, which rollback strategy kicks in for a failed request, how to avoid race conditions across several fast interactions, and in which cases optimistic updates should deliberately be avoided.
-
Sep 2, 2025
The default Alpine.js build evaluates expressions in x-data and x-on through new Function(), which gets blocked immediately under a strict Content Security Policy without unsafe-eval. The dedicated Alpine.js CSP build replaces that evaluation with a safe expression parser, making reactive components possible even in environments with the strictest security policy.
-
Aug 31, 2025
x-intersect is the Alpine.js directive that turns the browser's IntersectionObserver API into a declarative HTML directive. It turns scroll animations, image lazy loading, one-time triggers and observed sections into a pure HTML task, without a single line of manual JavaScript observer code.