Livewire and Inertia: how we love and use both

We've been building Laravel applications with Livewire and Inertia for over 5 years. If you held an individual Spatie employee at gunpoint (please don't) and forced them to pick a favorite, you'll get a 50/50 split. It's like choosing between chocolate or vanilla ice cream: there's no objective winner (except vanilla). But when we look at the choice at hand as a team, it becomes easier to determine the right fit.

When we start a new project, we'll look at the specifications for the app and the shape of the team building it to determine the tools to include in our inventory. We're a Laravel agency, so starting with Laravel is obvious. But choosing a frontend stack to match isn't as straightforward as it was. Laravel has access to a large suite of first and third party tools to build an application frontend. Over the years, our options have grown. Plenty of choice is great, but it can lead to decision paralysis or fear of missing out. We've put our eggs in two baskets: Livewire and Inertia (paired with React). Why both? Because each have their strengths.

Each have their strengths

Livewire is incredibly accessible to backend developers. It comes with built-in affordances to handle events, display reactive data, and it offers more advanced features like debouncing and lazy loading. You can build a dynamic frontend with Livewire barely touching JavaScript.

Livewire uses Laravel's Blade templating language, which has direct access to your PHP application. This makes aspects like authorization and routing straightforward to implement, as the logic doesn't need to be serialized and passed down as JSON data.

Livewire has a thriving ecosystem. Version 3 ironed out the creases running on the client by default with deferred wire:model , reactive properties make it behave like a frontend framework, and performance improvements with batched requests. It's is an excellent foundation for third party tools and abstractions. Starting a project with Livewire, Flux, and Filament is a huge productivity boost. Filament balances on the perfect middle ground between install-and-go with good defaults and fiddling endlessly with configuration and composition, while Flux gives your design system a head start.

On the other hand, we have Inertia. Inertia is a thin layer between Laravel and your frontend framework of choice. It opens a portal to a first-class integration with everything your JavaScript framework provides. In our case: React. Inertia's codebase is small. Even when it wasn't as popular we weren't afraid of embracing it, because it would be manageable to take ownership of its core if necessary.

React still has the strongest ecosystem in frontend tooling and libraries. There are many accessible, composable UI libraries to shop from including Radix and shadcn. This isn't a coincidence. React has powerful libraries because its JavaScript-first model nurtures composability. For a project that benefits from a large, flexible design system, React is best in class.

React pairs exceptionally well with TypeScript. With our Laravel Data and TypeScript Transformer packages, there's end-to-end type safety from Laravel on the server to React on the client. All our components—both in the design systems and .tsx view files—are typed. Any change on the server incompatible with the expected types on the frontend will break the build: TypeScript creates a huge safety net when refactoring a large frontend codebase. Nothing beats the relief you feel when your frontend CI tests fail because you refactored an API resource in Laravel.

When to choose which

As a company, we feel equally confident starting a project with Livewire as with Inertia. Deciding between the two depends on the project requirements.

What kind of app are we talking about?

What does the app look like? Is it form and data heavy? Lots of custom inputs and widgets? Benefits from a design system and abstractions? Large surface area that would benefit from type safety? If the answer is yes to all, React and TypeScript are our prime candidate. Not because Livewire can't handle the requirements, but because we prefer React over Blade. If a custom design system and type safety aren't a dealbreaker, Livewire can be a better fit because Filament (for forms and table builders) and Flux (for more tailored views) provide a lot out of the box.

Does the interface need to be extendible by other developers?

When an interface needs to be packaged and extendable, Livewire is a given. A packaged application like Self-Hosted Mailcoach would not be as extendable and hackable as it is without Blade/Livewire. Developers can publish and override Blade views to customize the UI without a build step. This has also been useful in client projects that require us to build a UI that requires tailored customizations for different end users.

Do you want to incremental adapt your UI?

Livewire can be incrementally adopted. When a project resembles a website more than an app, we'll start with pure Blade and have the option to transition to Livewire if needed. No need to overcomplicate. This is also a blessing when working in legacy codebases. We have 10+ year old Laravel codebases in production, and Livewire is as easy to add to them as to our latest project spun up with laravel new.

What kind of team are you working with?

Software is a reflection of its creators. Technical decisions aren't made in a vacuum, we need to put them in the context of our team. The majority of our developers are backenders or have a PHP background. Our team of 8 developers has a single full-time frontender.

If an application would benefit from Inertia, we'll put together a team to accommodate that need. But if there's no strong pull from Livewire or Inertia, Livewire has an edge because it enables more team members to contribute.

Any other considerations?

While these are the main considerations we'll make between the two, a few smaller ones could tip the scale.

When you need server side rendering for SEO or performance, Inertia requires an extra step and the necessary Node infrastructure. If Inertia is a better fit it might be worth it, but adds overhead.

We're not worried about testing with either. In Laravel, the necessary unit and integration tests will look similar, and both can accommodate end-to-end tests with Cypress or Playwright. That said, pairing TypeScript on the frontend with server-to-client type safety eradicates an entire class of interface bugs in Inertia apps.

Looking at other options than Livewire or React

Sometimes a client requests a SPA with good reason: offline support, shared API with other apps, a large distributed team that prefers distinct applications. While we can accommodate those needs, we prefer Inertia to avoid the overhead of global state management, authorization, and routing on the frontend.

Another typical candidate for a SPA is a mobile app, at least when it's a near 1:1 copy of the web application. In that case, we'd benefit from a SPA—or Inertia to some extent—to have shared resources or a shared API. But in our experience, this is a rare requirement. Most native needs are met with companion apps that provide a specific subset of the main app's functionality. In those cases, we won't shy away from using Livewire when it makes sense for the web application and have a small JSON-specced API for the mobile needs.

We're always on the lookout for other frontend frameworks, but we're still happy React users. It's our default unless a client asks for a specific framework because it's a better fit for their team. (And since Vue and React are both great tools for the job, that argument trumps our personal preferences.) Livewire has its counterparts like htmx or Turbo, but Livewire remains the most integrated and polished solution for Laravel.

You might not even need a framework at all. Blade with vanilla JavaScript (or Alpine sprinkled in) is still a great place to start for many projects. And the door to incrementally adopting Livewire is always open.

Closing thoughts

We're bullish on both Livewire and Inertia because they appear to have a bright future ahead of them. Livewire 3 is the best version yet and is still in active development. Inertia has become a first-party Laravel tool with room to grow.

• When we want end-to-end type safety and want to harness the React ecosystem, Inertia is the clear winner.
• When we're building an extensible, packaged app, or want incremental adaptation, or want a project to rely on more backend technologies than frontend, Livewire is the clear winner.

All other projects fall into a gray area, and a lot of our projects would thrive with either. At that point, it depends on the profile of the team and client to decide on which tool to move forward with.