Tag: Alpine.js

1. Alpine.js $watch: Observing Values and Reacting to Changes

   Mar 6, 2026

   Templates update automatically when reactive state changes: that is Alpine's core promise. But what about side effects outside the DOM? When a URL parameter needs updating, an API needs calling, or a localStorage value needs syncing, Alpine.js needs an explicit watcher. That is what $watch is for.

   Read more

2. Alpine.js x-data: Structuring Component State Correctly

   Feb 27, 2026

   x-data is the heart of every Alpine.js component. Misjudging state scope leads to unexpected reactivity effects and painful refactoring. This tutorial shows how to correctly scope, reuse, and communicate state between components.

   Read more

3. Alpine.js and Astro Islands: Targeted Interactivity in Static Site Generators

   Feb 24, 2026

   Astro renders pages without any client-side JavaScript by default and only ships interactivity where it is actually needed. Alpine.js and Astro Islands together are the lightest combination for that model: a single small library instead of a full React or Vue bundle per interactive island.

   Read more

4. FAQ Accordion Connected to Schema Markup with Alpine.js

   Feb 22, 2026

   A FAQ accordion and its accompanying FAQPage schema markup are, in practice, almost always maintained separately, which almost inevitably leads to drift between the visible content and the structured data. With Alpine.js you build a FAQ accordion that uses the same data source for the visible display and for the generated JSON-LD, so both are guaranteed to stay in sync and rich snippets keep working reliably.

   Read more

5. Virtual Scrolling with Alpine.js: 10,000 Rows Without Performance Issues

   Feb 16, 2026

   Rendering 10,000 DOM elements at once brings any browser to a crawl. Virtual scrolling solves the problem: only the visible elements actually exist in the DOM, while everything else is simulated with correctly sized placeholders. The result is a smooth scrollbar with no performance loss, achievable with Alpine.js and the native IntersectionObserver.

   Read more

6. Computed Values and the Getter Pattern in Alpine.js

   Feb 15, 2026

   Alpine.js has no built-in computed(), but JavaScript getters fill that gap almost completely. Anyone who understands how getters behave reactively inside Alpine.data(), how they can be chained, and how they differ from a regular method, can build derived values that are just as clean as computed properties in Vue or useMemo in React.

   Read more

7. Alpine.js vs. React Hooks: When Is Alpine Enough?

   Feb 5, 2026

   React Hooks have revolutionized component development, but for many server-rendered projects Alpine.js is the better choice: less build tooling, no virtual DOM, direct HTML enhancement. This article uses concrete patterns to show where Alpine.js is fully sufficient and where React plays to its strengths.

   Read more

8. Alpine.js Events: $dispatch and @window Events Between Components

   Jan 30, 2026

   Two Alpine components on the same page need to talk to each other, but without shared state, without prop drilling, and without global variables. The native browser event system combined with $dispatch and @window listeners solves exactly that, elegantly.

   Read more

9. Alpine.js x-model Modifiers: .lazy, .debounce, .number Explained

   Jan 29, 2026

   x-model synchronizes input fields with Alpine data, but by default on every single keystroke. With .lazy, .debounce and .number, a simple two-way binding becomes a precise tool for API calls, numeric inputs and performance-optimized forms.

   Read more

10. Custom Datepicker with Alpine.js: Build a Calendar Without Flatpickr

    Jan 24, 2026

    Flatpickr brings along kilobytes of jQuery heritage and an external dependency. A custom Alpine.js datepicker fits into fewer than 80 lines of reactive JavaScript, complete with month navigation, keyboard support, min/max limits, and full ARIA semantics, without a single external dependency.

    Read more