Introduction
Discover how Gale brings server-driven reactivity to Laravel, powered by Alpine.js.
What is Gale?
Gale is a server-driven reactivity system that brings the power of real-time updates to your Laravel applications. It creates a seamless bridge between your PHP backend and the browser using Server-Sent Events (SSE) and Alpine.js.
Think of it this way: your Laravel controllers decide what should happen, and Alpine.js makes it happen in the browser. Gale is the communication layer that connects them.
When a user interacts with your page, Gale sends the current Alpine state to your server. Your controller processes the request and streams back updates—state changes, DOM patches, navigation commands, or even JavaScript to execute. Alpine receives these updates and reacts accordingly.
The GALE Stack: Gale is the "G" in GALE—Gale, Alpine.js, Laravel, and Eloquent. A full-stack approach for building reactive Laravel applications where your server stays in control.
How it Works
Gale consists of two packages that work together:
Laravel Gale (Backend)
A fluent response builder for your controllers. Push state updates, manipulate the DOM, trigger navigation, stream content, and more—all from PHP.
Alpine Gale (Frontend)
An Alpine.js plugin that listens for SSE events and applies updates. Provides HTTP magics, directives, and keeps your Alpine components reactive.
The Request Flow
- User triggers an action — A button click, form submit, or any interaction you define
- Alpine Gale sends the request — Current Alpine state is serialized and sent to your server
-
Your controller processes it — Access state via
request()->state(), run your logic, query your database -
Server streams SSE events — Return updates via
gale(): state patches, DOM changes, redirects - Alpine Gale applies updates — The DOM morphs, Alpine data updates, your page reacts
Streaming Updates
The Power of Gale + Alpine
Gale and Alpine.js are designed to work in sync. Alpine handles client-side reactivity while Gale extends that reactivity to your server. Together, they give you a powerful toolkit:
Server-Driven State
Push state patches from your controller and watch Alpine's x-data update automatically. JSON Merge Patch keeps it efficient.
DOM Manipulation
Append, prepend, replace, or morph DOM elements from PHP. Alpine keeps its reactivity intact through all changes.
Component Targeting
Target specific Alpine components by ID. Update their state independently, call their methods, or replace their content.
Real-time Streaming
SSE means the server can push updates as they happen. Stream AI responses, show progress, broadcast live data.
Method Invocation
Call Alpine component methods directly from your controller. Trigger animations, open modals, or run any client-side logic.
JavaScript Execution
When you need it, dispatch JavaScript from the server. Full flexibility when Alpine alone isn't enough.
Server-Controlled Navigation
Handle redirects and URL changes from your controller. The client updates seamlessly without full page reloads.
When to Use Gale
Gale shines when you want your Laravel backend to drive the user experience while keeping the frontend reactive and responsive.
Gale is great for:
- Laravel applications that need reactive UI without a JavaScript framework
- Real-time dashboards, notifications, and live data feeds
- Forms with server-side validation and dynamic field updates
- Multi-step wizards where the server controls the flow
- Progress indicators for file uploads or long-running jobs
- Infinite scrolling and dynamic content loading
- Applications where business logic lives in PHP and should stay there
- Teams already comfortable with Blade and Alpine who want more power
Consider other approaches for:
- Offline-first applications that need to work without a server connection
- Heavy canvas or WebGL applications with complex client-side rendering
Next Steps
Ready to get started? Follow these guides in order: