PHPackages xgenious/xgpagebuilder - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Framework](/categories/framework) 4. / 5. xgenious/xgpagebuilder ActiveLibrary[Framework](/categories/framework) xgenious/xgpagebuilder ====================== A powerful and flexible page builder package for Laravel applications v1.6.0(4w ago)031↓75%2[1 issues](https://github.com/XgeniousLLC/xgpagebuilder/issues)MITJavaScriptPHP ^8.2CI passing Since Mar 12Pushed 3w agoCompare [ Source](https://github.com/XgeniousLLC/xgpagebuilder)[ Packagist](https://packagist.org/packages/xgenious/xgpagebuilder)[ RSS](/packages/xgenious-xgpagebuilder/feed)WikiDiscussions main Synced 3w ago READMEChangelog (10)Dependencies (28)Versions (11)Used By (0) XgPageBuilder ============= [](#xgpagebuilder) [![Latest Version on Packagist](https://camo.githubusercontent.com/709ec69716d0e212743f6f82a0b00cc6be644f1db9e33d9af498bb0ec6811372/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f7867656e696f75732f7867706167656275696c6465722e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/xgenious/xgpagebuilder)[![Total Downloads](https://camo.githubusercontent.com/47e8c3d741e14a5d697e311de102e704daa14fd94c6c5a68c1d65f4f231cc643/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f7867656e696f75732f7867706167656275696c6465722e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/xgenious/xgpagebuilder)[![License](https://camo.githubusercontent.com/aa35b1fe18d9d4287d539c49173d4c4db607cc67d26000ca6eb23b2cb5c27062/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f6c2f7867656e696f75732f7867706167656275696c6465722e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/xgenious/xgpagebuilder)[![PHP Version](https://camo.githubusercontent.com/ee56fc9f5003f427f86b670b19c146f4dd40b07880b55dfc44dd542e948f6124/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f7068702d762f7867656e696f75732f7867706167656275696c6465722e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/xgenious/xgpagebuilder) A powerful, self-contained page builder package for Laravel with a modern React frontend. Build beautiful pages with drag-and-drop widgets, extensible architecture, and zero conflicts with your existing application. 📘 [XgPageBuilder Documentation](https://xgeniousllc.github.io/xgpagebuilder/) --- Features -------- [](#features) - **Visual Page Builder** — Modern React drag-and-drop interface - **Extensible Widget System** — 9+ built-in widgets with easy custom widget creation - **Advanced Styling** — Comprehensive style controls with live CSS preview - **Responsive Design** — Desktop / Tablet / Mobile preview modes - **Highly Configurable** — Works seamlessly with existing Laravel apps - **Performance Optimized** — Efficient CSS generation and caching - **Secure** — XSS protection and input sanitization - **Self-Contained Assets** — Pre-built React assets, no Node.js needed in your host app --- Requirements ------------ [](#requirements) - **PHP:** 8.2 or higher - **Laravel:** 11.0 or 12.0 - **Database:** MySQL 5.7+ or PostgreSQL 10+ --- Installation ------------ [](#installation) ### Step 1 — Install via Composer [](#step-1--install-via-composer) ``` composer require xgenious/xgpagebuilder ``` ### Step 2 — Publish config and assets, run migrations [](#step-2--publish-config-and-assets-run-migrations) ``` php artisan vendor:publish --tag=page-builder-config php artisan vendor:publish --tag=page-builder-assets php artisan migrate php artisan config:clear ``` ### Step 3 — Add columns to your pages table [](#step-3--add-columns-to-your-pages-table) Create a new migration: ``` Schema::table('pages', function (Blueprint $table) { $table->boolean('use_page_builder')->default(false); $table->string('page_builder_status')->default('off'); // 'on' or 'off' }); ``` Two flags are needed: - `use_page_builder` — triggers `renderPage()` in the controller - `page_builder_status` — gates display in the blade view (`'on'` = show builder content) ### Step 4 — Register the widget view namespace [](#step-4--register-the-widget-view-namespace) In `app/Providers/AppServiceProvider.php`: ``` public function boot(): void { $this->loadViewsFrom(base_path('plugins/PageBuilder/views'), 'pagebuilder'); } ``` Adjust the path to wherever your widget blade views live. This is required for `view('pagebuilder::...')` to work inside widget `render()` methods. ### Step 5 — Add model relationship [](#step-5--add-model-relationship) ``` // app/Models/Backend/Page.php public function pageBuilderContent() { return $this->hasOne(\Xgenious\PageBuilder\Models\PageBuilderContent::class, 'page_id'); } ``` ### Step 6 — Point config to your models [](#step-6--point-config-to-your-models) ``` // config/xgpagebuilder.php 'models' => [ 'page' => \App\Models\Backend\Page::class, 'admin' => \App\Models\Backend\Admin::class, ], ``` --- Usage ----- [](#usage) ### Controller [](#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 `true` as the second argument to `renderPage()`. Without it, CSS from style fields is silently dropped. ### Blade view [](#blade-view) ``` @if($page->page_builder_status === 'on') @if(isset($page->rendered_content)) {!! $page->pagebuilder_generated_styles !!} {!! $page->rendered_content !!} @endif @else {!! $page->content !!} @endif ``` ### Editor link in admin [](#editor-link-in-admin) ``` @if($page->use_page_builder) Open Page Builder @endif ``` --- Creating Custom Widgets ----------------------- [](#creating-custom-widgets) ``` namespace Plugins\PageBuilder\Widgets; use Xgenious\PageBuilder\Core\BaseWidget; use Xgenious\PageBuilder\Core\ControlManager; use Xgenious\PageBuilder\Core\FieldManager; use Xgenious\PageBuilder\Core\WidgetCategory; class CallToActionWidget extends BaseWidget { protected function getWidgetType(): string { return 'call_to_action'; } protected function getWidgetName(): string { return 'Call to Action'; } protected function getWidgetIcon(): string|array { return 'las la-bullhorn'; } protected function getCategory(): string { return WidgetCategory::MARKETING; } public function getGeneralFields(): array { $control = new ControlManager(); $control->addGroup('content', 'Content') ->registerField('title', FieldManager::TEXT()->setLabel('Title')->setDefault('Get Started Today')) ->registerField('button_text', FieldManager::TEXT()->setLabel('Button Text')->setDefault('Sign Up')) ->registerField('button_url', FieldManager::URL()->setLabel('Button URL')->setDefault('#')) ->endGroup(); return $control->getFields(); } public function getStyleFields(): array { return []; } public function render(array $settings = []): string { $content = $settings['general']['content'] ?? []; return view('pagebuilder::widgets.cta', [ 'title' => $content['title'] ?? '', 'buttonText' => $content['button_text'] ?? '', 'buttonUrl' => $content['button_url'] ?? '#', ])->render(); } } ``` > **Icon format:** always use Line Awesome format `'las la-ICONNAME'` (e.g. `'las la-bullhorn'`, `'las la-star'`). > **IMAGE and VIDEO fields** return an array `['url' => '...', 'id' => ...]`, not a plain string. Always extract the URL: `$value['url'] ?? ''`. Register in config and clear cache: ``` // config/xgpagebuilder.php 'custom_widgets' => [ \Plugins\PageBuilder\Widgets\CallToActionWidget::class, ], ``` ``` php artisan config:clear ``` See [Widget Development Guide](docs/WIDGET-DEVELOPMENT.md) for all field types and real-world examples. --- Built-in Widgets ---------------- [](#built-in-widgets) - **Header Widget** — Hero sections with titles, subtitles, and CTAs - **Features Widget** — Feature grids with icons and descriptions - **Testimonial Widget** — Customer testimonials and reviews - **Image Widget** — Responsive images with captions - **Image Gallery Widget** — Photo galleries with lightbox - **Video Widget** — Embedded videos (YouTube, Vimeo, self-hosted) - **Icon Widget** — Icon displays with customization - **Tabs Widget** — Tabbed content sections - **Code Widget** — Syntax-highlighted code blocks --- Documentation ------------- [](#documentation) - **[Setup & Integration Guide](docs/DOCUMENTATION.md)** — Full installation, configuration, and host-app integration - **[Widget Development Guide](docs/WIDGET-DEVELOPMENT.md)** — Create custom widgets and migrate legacy addons - **[Frontend Integration](docs/FRONTEND-INTEGRATION.md)** — CSS pipeline, JS, responsive, media library - **[Field Reference](docs/fields.md)** — All available PHP fields with examples - **[Online Documentation](https://xgeniousllc.github.io/xgpagebuilder/)** — Full documentation website --- Quick Links ----------- [](#quick-links) - **Editor URL:** `/{route_prefix}/edit/{pageId}` (default: `/page-builder/edit/{pageId}`) - **API Endpoints:** `/api/page-builder/*` - **Config file:** `config/xgpagebuilder.php` --- Publishing Options ------------------ [](#publishing-options) ``` # Configuration php artisan vendor:publish --tag=page-builder-config # Pre-built frontend assets (required) php artisan vendor:publish --tag=page-builder-assets # Views (for customization) php artisan vendor:publish --tag=page-builder-views # Migrations php artisan vendor:publish --tag=page-builder-migrations ``` --- Troubleshooting --------------- [](#troubleshooting) ### Assets 404 (page-builder.js / page-builder.css) [](#assets-404-page-builderjs--page-buildercss) ``` cd vendor/xgenious/xgpagebuilder npm install && npm run build cd ../../.. php artisan vendor:publish --tag=page-builder-assets --force ``` > Assets are published to `public/assets/vendor/page-builder/` — not `/vendor/page-builder/`. nginx commonly blocks `/vendor/` URL paths as a security rule. ### Editor shows blank page [](#editor-shows-blank-page) ``` php artisan vendor:publish --tag=page-builder-views --force php artisan view:clear && php artisan config:clear ``` ### Widgets not appearing in sidebar [](#widgets-not-appearing-in-sidebar) ``` php artisan config:clear ``` Verify the widget class is listed in `custom_widgets` in config and extends `BaseWidget`. ### Content not showing on frontend [](#content-not-showing-on-frontend) 1. Check `page_builder_status` is `'on'` for the page 2. Check `use_page_builder` is `true` 3. Verify blade outputs `$page->pagebuilder_generated_styles` in a `` tag before `$page->rendered_content` ### Route conflicts [](#route-conflicts) ``` // config/xgpagebuilder.php 'route_prefix' => 'admin/page-builder', ``` --- Contributing ------------ [](#contributing) 1. Fork the repository 2. Create your feature branch (`git checkout -b feature/amazing-feature`) 3. Commit your changes 4. Push to the branch 5. Open a Pull Request --- License ------- [](#license) This package is open-sourced software licensed under the [MIT license](LICENSE). --- Support ------- [](#support) - **Email:** - **Issues:** [GitHub Issues](https://github.com/XgeniousLLC/xgpagebuilder/issues) --- **Made with ❤️ by Xgenious** ### Health Score 45 — FairBetter than 91% of packages Maintenance94 Actively maintained with recent releases Popularity11 Limited adoption so far Community12 Small or concentrated contributor base Maturity53 Maturing project, gaining track record Bus Factor2 2 contributors hold 50%+ of commits How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~11 days Total 8 Last Release 28d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/3cb40b1021fcbec528d9f15fce9a9b33c545c7cb50e280ae5d0ce3eb0d4f628f?d=identicon)[sharifur](/maintainers/sharifur) --- Top Contributors [![Rakib01](https://avatars.githubusercontent.com/u/33548111?v=4)](https://github.com/Rakib01 "Rakib01 (36 commits)")[![jannatul-faria](https://avatars.githubusercontent.com/u/140428598?v=4)](https://github.com/jannatul-faria "jannatul-faria (35 commits)")[![Sharifur](https://avatars.githubusercontent.com/u/28456389?v=4)](https://github.com/Sharifur "Sharifur (7 commits)")[![DiptoSarkar182](https://avatars.githubusercontent.com/u/106833842?v=4)](https://github.com/DiptoSarkar182 "DiptoSarkar182 (1 commits)") --- Tags laravelcmsvisual editorwidgetspage builderxgenious ### Code Quality TestsPHPUnit ### Embed Badge ![Health badge](/badges/xgenious-xgpagebuilder/health.svg) ``` [![Health](https://phpackages.com/badges/xgenious-xgpagebuilder/health.svg)](https://phpackages.com/packages/xgenious-xgpagebuilder) ``` ### Alternatives [psalm/plugin-laravel Psalm plugin for Laravel 3345.1M337](/packages/psalm-plugin-laravel)[laravel/cashier Laravel Cashier provides an expressive, fluent interface to Stripe's subscription billing services. 2.5k28.4M137](/packages/laravel-cashier)[laravel/pulse Laravel Pulse is a real-time application performance monitoring tool and dashboard for your Laravel application. 1.7k14.1M122](/packages/laravel-pulse)[laravel/cashier-paddle Cashier Paddle provides an expressive, fluent interface to Paddle's subscription billing services. 267880.7k3](/packages/laravel-cashier-paddle)[laravel/mcp Rapidly build MCP servers for your Laravel applications. 77018.2M121](/packages/laravel-mcp)[roots/acorn Framework for Roots WordPress projects built with Laravel components. 9772.3M122](/packages/roots-acorn) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)