Key Features
Zero-JS Build
Work entirely in Laravel + Livewire—no React, Webpack, or Vite pipeline needed. Live drag-and-drop canvas with instant updates.
Component System
Create components from any Livewire component. No need to rewrite your components to use the page builder.
Laravel Native
Use familiar Laravel validation, localization, and Blade templates. Server-driven rendering for optimal performance.
Convert Your Current Components with Ease
Transform your existing Blade components into page builder blocks with minimal changes. Just add a few traits and properties to make them editable in the visual editor.
<?php
namespace App\Example;
use LivewirePageBuilder\Traits\PageBuilderComponent;
use Livewire\Component;
use LivewirePageBuilder\Interfaces\PageBuilderComponentInterface;
class MyCustomComponent extends Component implements PageBuilderComponentInterface // implement the interface
{
use PageBuilderComponent; // use the trait
public $title;
...
public static function getConfig(): array // define the config for the component
{
return [
'name' => __('My Custom Component'),
'description' => __('A description of what your component does'),
'icon' => '/path/to/icon.svg',
'allow_children' => false,
'props' => [
'title' => [
'type' => \LivewirePageBuilder\Props\Text::class,
'label' => __('Title'),
'default' => __('Default Title'),
],
],
];
}
}
Why Choose Livewire Page Builder?
Native Laravel Experience
Stay in the technology you already know—routes, Blade, policies, commands—while still getting a modern page-builder UI.
Zero Build-Step
No JavaScript SPA tool-chain. Write PHP, hit save, refresh—done. Instant updates with Livewire's reactivity.
Component Reuse
The same Blade components you ship in code become drag-and-drop blocks in the editor—no duplication.
Design Control
Every block ships with padding, margin, border, and color controls—saving you countless design tweak tickets.
SEO & SSR Friendly
Output is server-rendered Blade, so crawlers see full HTML—no hydration delays, no client-side routing issues.
Localization Ready
Translation helper everywhere, dark-mode compatible UI, semantic markup from day one.
Ready to Build Amazing Pages?
Start building beautiful, interactive pages with Livewire Page Builder today.