Installation Guide
Complete guide to installing and setting up XgPageBuilder in your Laravel application.
Requirements
- PHP: 8.2 or higher
- Laravel: 11.0 or 12.0
- Database: MySQL 5.7+ or PostgreSQL 10+
Step 1: Install via Composer
composer require xgenious/xgpagebuilder
The package will be auto-discovered by Laravel.
Step 2: Publish Config and Assets
php artisan vendor:publish --tag=page-builder-config
php artisan vendor:publish --tag=page-builder-assets
page-builder-config— createsconfig/xgpagebuilder.phppage-builder-assets— publishes the pre-built React editor topublic/assets/vendor/page-builder/
Step 3: Run Migrations
php artisan migrate
This creates:
page_builder_content— stores page JSON contentpage_builder_widgets— stores widget datapage_editing_sessions— manages concurrent editing locks
Step 4: Add Columns to Your Pages Table
Create a migration for your existing pages table:
// database/migrations/xxxx_add_page_builder_to_pages.php
Schema::table('pages', function (Blueprint $table) {
$table->boolean('use_page_builder')->default(false);
$table->string('page_builder_status')->default('off');
});
Both columns are required:
| Column | Type | Purpose |
|---|---|---|
use_page_builder | boolean | Triggers renderPage() in the controller |
page_builder_status | string ('on'/'off') | Controls display in the blade view |
php artisan migrate
Step 5: Configure Models
Update config/xgpagebuilder.php to point to your application’s models:
'models' => [
'page' => \App\Models\Backend\Page::class,
'admin' => \App\Models\Backend\Admin::class,
],
Step 6: Update Page Model
Add the relationship to your Page model:
// app/Models/Backend/Page.php
public function pageBuilderContent()
{
return $this->hasOne(\Xgenious\PageBuilder\Models\PageBuilderContent::class, 'page_id');
}
Step 7: Register Widget View Namespace
In app/Providers/AppServiceProvider.php, register the view namespace that widgets use for their blade templates:
public function boot(): void
{
$this->loadViewsFrom(base_path('plugins/PageBuilder/views'), 'pagebuilder');
}
Adjust the path to wherever your widget blade files live. Without this step, view('pagebuilder::...') calls in widget render() methods will throw “View not found”.
Step 8: Frontend Integration
Update your page controller:
use Xgenious\PageBuilder\Services\PageBuilderRenderService;
public function show($slug)
{
$page = Page::where('slug', $slug)->firstOrFail();
if ($page->use_page_builder) {
$result = app(PageBuilderRenderService::class)->renderPage($page, true);
$page->rendered_content = $result['html'] ?? '';
$page->pagebuilder_generated_styles = $result['css'] ?? '';
}
return view('frontend.pages.show', compact('page'));
}
Always pass
trueas the second argument torenderPage(). Without it, CSS from style fields is silently dropped and your layout will break.
Update your Blade view:
@if($page->page_builder_status === 'on')
@if(isset($page->rendered_content))
<style>{!! $page->pagebuilder_generated_styles !!}</style>
{!! $page->rendered_content !!}
@endif
@else
{!! $page->content !!}
@endif
Step 9: Clear Caches
php artisan config:clear
php artisan view:clear
php artisan cache:clear
Verification
Access the page builder editor at:
/{route_prefix}/edit/{pageId}
Default: /page-builder/edit/1
If you see the React interface, installation is complete.
Optional: Publish Views
Publish views only if you need to customize the editor blade template:
php artisan vendor:publish --tag=page-builder-views
Troubleshooting
Editor shows blank page / Assets 404
cd vendor/xgenious/xgpagebuilder
npm install && npm run build
cd ../../..
php artisan vendor:publish --tag=page-builder-assets --force
Verify asset files exist:
ls public/assets/vendor/page-builder/assets/
# Should show: page-builder-standalone.[hash].js page-builder-standalone.[hash].css
Assets live at
/assets/vendor/page-builder/— not/vendor/page-builder/. nginx commonly blocks/vendor/URL paths as a security rule.
CSS Not Loading in Editor
php artisan vendor:publish --tag=page-builder-views --force
php artisan view:clear && php artisan config:clear
Routes Not Found
php artisan route:list | grep page-builder
Content Not Showing on Frontend
- Check
page_builder_statusis'on'for the page (not justuse_page_builder) - Verify blade outputs both
pagebuilder_generated_stylesandrendered_content
Next Steps
- Configuration Guide — Configure routes, media, CSS, and more
- Widget Development — Create custom widgets
- Frontend Integration — CSS pipeline, JS, responsive modes