We love chasing performance wins. Not the kind that require you to rewrite everything from scratch or abandon the tools you already know — but the kind where you drop in a package, run a command, and suddenly your pages feel noticeably snappier. Today, we're excited to share one of those wins.
We've updated WireframePro with support for Livewire Blaze, an experimental-but-impressive package from the Livewire team that pre-compiles Blade components for blazing fast rendering performance. And yes, the name is completely on the nose.
So, What Is Blaze?
At its core, Blaze is a Laravel package that tackles a sneaky performance bottleneck that most of us don't think much about: Blade component rendering overhead.
Every time Laravel renders a Blade component — a button, a card, a badge — it goes through a full runtime evaluation cycle. That's fine for one or two components. But what about a dashboard with a data table, a sidebar, a navigation bar, dozens of status badges, and a handful of action buttons? All those small components add up. Fast.
Blaze solves this with a two-tier approach:
1. Compile-time folding — For components that always produce the same output for the same input (think: buttons, cards, badges), Blaze pre-renders the static parts at compile time. By the time a user request comes in, that work is already done.
2. Runtime memoization — For components that are mostly static but use some dynamic data, Blaze caches the rendered output and avoids re-rendering identical components multiple times on the same page.
The benchmark from the Blaze team says it all:
Rendering 25,000 foldable button components:
Without Blaze ████████████████████████████████████████ 750ms
With Blaze ██ 45ms
~17x faster
Now, you're probably not rendering 25,000 buttons on a single page (hopefully). But even on typical real-world pages, Blaze can shave 10–100ms off your rendering time — and those milliseconds matter for the user experience.
How It Works in Practice
The API is wonderfully simple. You add a single directive to the top of any eligible Blade component:
{{-- resources/views/components/button.blade.php --}}
@blaze
@props(['variant' => 'primary', 'size' => 'md'])
<button type="button" class="btn btn-{{ $variant }} btn-{{ $size }}">
{{ $slot }}
</button>
That's it. The @blaze directive tells Blaze that this component is "pure" — it has no side effects, doesn't reach into auth state or the database, and always renders the same output for the same props. Blaze takes it from there.
The mental model is clean: think of @blaze components as your design system building blocks. Buttons. Cards. Badges. Typography. Layout wrappers. The things that live in a component library and look identical regardless of who's looking at them or when.
What About Components That Aren't Fully Static?
This is where Blaze gets really clever. Sometimes a component is mostly static, but has a small dynamic section — like a form input that needs to show validation errors. Normally, that tiny $errors check would prevent you from using @blaze at all.
Enter @unblaze. It lets you punch a hole in an otherwise static component, keeping everything else optimized:
@blaze
@props(['name', 'label'])
<div class="form-field">
<label>{{ $label }}</label>
<input type="text" name="{{ $name }}" class="input">
@unblaze
@if($errors->has($name))
<p class="text-red-500 text-sm mt-1">{{ $errors->first($name) }}</p>
@endif
@endunblaze
</div>
The <div>, <label>, and <input> get pre-rendered at compile time. Only the error message block runs at runtime. You get the best of both worlds: optimization and full functionality.
Great News If You're Using Flux UI
If WireframePro is your starting point and you're building on Flux UI v2, you're in for a treat: all eligible Flux components are already marked with @blaze. You don't have to touch a thing. Just install Blaze and every Flux button, badge, card, and icon automatically benefits from the optimization.
composer require livewire/blaze:^1.0@beta
That single command is genuinely all you need to start seeing improvements. The performance gains kick in automatically the next time your views are compiled.
What We Updated in WireframePro
With this release, WireframePro's component library has been audited and annotated with @blaze directives across all eligible UI components. Here's what that means for you:
All pure UI components (buttons, badges, alerts, stat cards, avatar placeholders, icon wrappers) are now
@blaze-eligible and will be pre-rendered at compile time.Form field components use
@unblazeto keep dynamic error states running while the surrounding markup is folded.Navigation and auth-aware components are intentionally not marked with
@blaze, because they depend on request state and user context — exactly as they should be.
The result is a starter kit that feels noticeably faster right out of the box, especially on pages with repeated UI patterns like tables, grids, and lists.
A Word of Caution
Blaze is still early-stage and experimental — the Livewire team is upfront about this. APIs may change, and edge cases are still being worked out. We've tested it thoroughly in WireframePro's component set, but if you start annotating your own custom components with @blaze, be sure to test carefully. The good news: Blaze fails gracefully. If something can't be optimized, it quietly falls back to normal Blade rendering. Your app won't break — it just won't be faster in that specific case.
If you want to debug why a component isn't being folded, you can enable debug mode in a service provider:
app('blaze')->debug();
This surfaces the actual exception instead of swallowing it silently — super handy during development.
Should You Use It Today?
If you're on WireframePro — yes, you're already benefiting from it once you run composer require livewire/blaze:^1.0@beta. The work is done for you.
If you're considering adding @blaze to your own component library, the checklist is simple:
Does it work the same for all users?
Does it work the same on every request?
Does it only depend on the props you pass in?
Are all its child components also foldable?
If yes to all four — add @blaze and enjoy the speedup.
Performance improvements that don't require you to change how you build things are rare. Blaze is one of them. And we think it's going to become a standard part of every serious Laravel project once it hits stable.
