PHPackages flobbos/page-composer - 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. flobbos/page-composer ActiveLibrary[Framework](/categories/framework) flobbos/page-composer ===================== A livewire based CMS for Laravel 1.0.2(2mo ago)0220MITBladePHP ^8.3 Since Nov 3Pushed 1mo ago1 watchersCompare [ Source](https://github.com/Flobbos/page-composer)[ Packagist](https://packagist.org/packages/flobbos/page-composer)[ RSS](/packages/flobbos-page-composer/feed)WikiDiscussions master Synced 3w ago READMEChangelog (10)Dependencies (8)Versions (46)Used By (0) PageComposer ============ [](#pagecomposer) [![Page Composer](img/page-composer.png)](img/page-composer.png) **Handle your content a little differently** This package aims to create a flexible CMS experience for the user as well as the developer. Content is divided into rows and columns which contain elements of your choosing, text, photo, video and elements you can create based on your needs. This is a different approach at handling website content. I hope you like it. ### Docs [](#docs) - [Installation](#installation) - [Dependency configuration](#dependency-configuration) - [Laravel layout](#laravel-layout) - [Livewire](#livewire) - [Configuration](#configuration) - [Laravel compatibility](#laravel-compatibility) - [Upgrading from 0.1.x to 1.x](#upgrading-from-01x-to-1x) Installation ------------ [](#installation) ### Install package [](#install-package) Add the package in your composer.json by executing the command. ``` composer require flobbos/page-composer ``` PageComposer features auto discover for Laravel. In case this fails, just add the Service Provider to the app.php file. ``` Flobbos\PageComposer\PageComposerServiceProvider::class, ``` ### Running the installation routine [](#running-the-installation-routine) Run the following install command. ``` php artisan page-composer:install ``` If you're asked for a name of the installation just make something up. No further steps are required everything's automated. ### Recalculate row available space [](#recalculate-row-available-space) If you changed column layouts or suspect stale `available_space` values in existing content, run: ``` php artisan page-composer:sync-row-space ``` Use dry-run mode to preview updates without writing to the database: ``` php artisan page-composer:sync-row-space --dry-run ``` ### Publish configuration file [](#publish-configuration-file) This will publish all necessary files and assets needed for getting up and running. Just select the PageComposerServiceProvider and you should be good to go. ``` php artisan vendor:publish ``` Dependency configuration ------------------------ [](#dependency-configuration) ### TranslatableDB [](#translatabledb) The package relies on flobbos/translatable-db to handle translations. It's important to configure this package as well. For this you need to run: ``` php artisan vendor:publish ``` Select the Flobbos\\TranslatableDb package. It will publish a configuration file to which you need to add the following path: ``` 'language_model' => 'Flobbos\PageComposer\Models\Language', ``` This way the language model will be detected correctly and translations can be loaded. ### Livewire [](#livewire) Please also check the [Livewire](#livewire) section for two very important config settings to make things work correctly. ### Tailwind [](#tailwind) Additionally you will need to add the package views to your TailwindCSS configuration so everything is compiled correctly. In the contents section of the config file please add the following line: ``` "./vendor/flobbos/page-composer/src/resources/views/**/*.blade.php", ``` This will let Tailwind know where to look for files to check for classnames and such. ### Laravel layout [](#laravel-layout) PageComposer injects a few snippets onto the scripts stack in order to make the default components work like the editor for example. For this to work correctly you need to add the following to your default layout: ``` @stack('scripts') ``` Either at the top or bottom of your layout file. We also need to inject a few styles to make the editor work so please add the following to the top of your layout after your regular styles. ``` @stack('styles') ``` ### Migrations [](#migrations) During the publishing process the migration for the newsletter\_templates table was also published. Add all fields you need and run the migration. ``` php artisan migrate ``` ### Adding the package [](#adding-the-package) ### Routes [](#routes) The routes will be automatically loaded from the package folder. However you may need to update the middlewares being used on these routes. You can do this easily by editing the config like so: ``` 'middleware' => [ 'web', 'auth:sanctum', config('jetstream.auth_session'), 'verified', ] ``` In this example we have Laravel Jetstream installed with the default configuration. ### Menu entries [](#menu-entries) There's no default menu provided with the package. You need to add these entries yourself. The following routes must be added to access the PageComposer: ``` route('page-composer::pages.index'); route('page-composer::pages.create'); route('page-composer::pages.edit',$page_id); ``` If you want to use the default preview route, you need to add the following route: ``` route('page-composer::pages.detail',$page_id); ``` There's also a built in micro bug tracker for users of the package. There users can report bugs or add wishes for new elements and such. ``` route('page-composer::dashboard'); ``` Configuration ------------- [](#configuration) The configuration options have been kept fairly simple at the moment. The following options are available: ### Validation rules [](#validation-rules) Here you can set some basic validation options that will be used for saving a page. ``` 'rules' => [ 'page.name' => 'required', //mandatory 'page.photo' => 'required', 'page.slider_image' => 'sometimes:image', 'page.newsletter_image' => 'sometimes:image', 'pageTranslations.*.content.title' => 'required', //mandatory 'page.category_id' => 'required', //remove if not using categories ], ``` ### FAQ [](#faq) There's a small FAQ to help people get started. If you want to show this: ``` 'showFaq' => true, ``` ### Tags [](#tags) If you want to use the tags provided by the package for the pages created: ``` 'useTags' => true, ``` ### Categories [](#categories) PageComposer comes with a default categorisation option. If you want to use it: ``` 'useCategories' => true, ``` ### Element Creator [](#element-creator) PageComposer provides stubs for creating new content elements. These will of course just create a blank element template which you need to update. This option might be a bit counter intuitive for the regular users if made available during production. ``` 'showElementCreator' => true, ``` ### Column Presets [](#column-presets) The row editor column buttons are configurable. A default set is included, and you can add or override presets in `config/pagecomposer.php`: ``` 'column_presets' => [ [ 'size' => 12, 'label' => 'Full', 'preview_segments' => 1, 'group' => 'full', 'requires_empty' => true, ], [ 'size' => 6, 'label' => 'Half', 'preview_segments' => 2, 'group' => 'halves_quarters', ], [ 'size' => 5, 'label' => '5/12', 'preview_segments' => 5, ], ], ``` Notes: - `size` is the column width in twelfths (`1` to `12`). - Presets with the same `size` override the default for that size. - `group` lets you keep row layouts compatible by only mixing presets from one group. - `requires_empty` shows that preset only when the row has no columns yet. ### Column Width Classes [](#column-width-classes) You can also override how each column size maps to Tailwind width classes: ``` 'column_widths' => [ 12 => 'w-full', 9 => 'w-3/4', 8 => 'w-2/3', 6 => 'w-1/2', 4 => 'w-1/3', 3 => 'w-1/4', ], ``` Any missing size falls back to `w-full`. ### Quill Editor Toolbar [](#quill-editor-toolbar) The Text and HeadlineText elements use [Quill](https://quilljs.com/) for rich text editing. The toolbar is configurable via the `quill_toolbar` key, which is passed directly to Quill's `modules.toolbar` option. The default exposes only a Normal / H1–H3 dropdown: ``` 'quill_toolbar' => [ [['header' => [false, 1, 2, 3]]], ], ``` Add groups for more formatting options (see [Quill's toolbar docs](https://quilljs.com/docs/modules/toolbar/) for the full syntax): ``` 'quill_toolbar' => [ [['header' => [false, 1, 2, 3]]], ['bold', 'italic', 'underline'], ['link'], [['list' => 'ordered'], ['list' => 'bullet']], ], ``` #### Alpine component name [](#alpine-component-name) The package registers a namespaced Alpine component called **`pageComposerEditor`** for its Quill-based elements. This avoids collisions with host apps that already register their own `quillEditor` (or similarly-named) Alpine component — your existing editors keep working untouched. If you publish a copy of the Text or HeadlineText elements and want them to pick up future package changes, make sure your published copy still uses `x-data="pageComposerEditor({})"`. Livewire -------- [](#livewire-1) The package relies on Livewire 4 and Alpine 3. ### Layout [](#layout) All full page components use the classic layout path which differs from the default layout path suggested by Livewire 3. Set the following option for the correct layout path: ``` 'layout' => 'layouts.app', ``` Laravel compatibility --------------------- [](#laravel-compatibility) LaravelPageComposer13.x1.x10-12.x0.1.xPageComposer 1.x requires Laravel 13, Livewire 4, and PHP 8.3+. Use 1.0.1 or newer — 1.0.0 shipped broken and is superseded. Upgrading from 0.1.x to 1.x --------------------------- [](#upgrading-from-01x-to-1x) The 1.x line targets Laravel 13 and Livewire 4, which forced several breaking changes. The package itself handles the framework-level migrations, but a few things will need attention in your host app if you customized or published parts of the package. ### 1. Bump your platform [](#1-bump-your-platform) Make sure your app is on PHP 8.3+, Laravel 13, and Livewire 4 before upgrading. These are hard minimums. ### 2. Clear caches aggressively during the upgrade [](#2-clear-caches-aggressively-during-the-upgrade) Livewire 4 and Laravel 13 produce different serialized formats than their predecessors. After running `composer update`: ``` php artisan cache:clear php artisan view:clear php artisan config:clear php artisan optimize:clear ``` If you see a `__PHP_Incomplete_Class` error on `Illuminate\Database\Eloquent\Collection`, it's a stale cache entry from the old version — clear the cache driver and flush sessions. ### 3. Drag & drop migrated to `wire:sort` [](#3-drag--drop-migrated-to-wiresort) 1.0.0 temporarily relied on the old `wire:sortable` directive from `@wotz/livewire-sortablejs`; 1.0.1 replaces it with Livewire 4's native `wire:sort`. If you built custom pieces that mimicked the old directive or piggy-backed on the old JS library, you will need to migrate: - `wire:sortable="method"` → `wire:sort="method"` - `wire:sortable.item="id"` → `wire:sort:item="id"` (dot → colon) - `wire:sortable.handle` → `wire:sort:handle` - Sort handler signatures change from `(array $items)` to `($id, $position)`, where `$position` is zero-based and the method is called once per moved item Remove any `@wotz/livewire-sortablejs` CDN script tags — they are no longer needed. ### 4. Quill Alpine component renamed [](#4-quill-alpine-component-renamed) The package's built-in Quill-based elements (`Text`, `HeadlineText`) previously used an Alpine component named `quillEditor`. That name is common in host apps, so it has been renamed to `pageComposerEditor` in 1.0.1. If you published those element views (via `vendor:publish --tag=page-composer-elements`) into your app, update the copies: ``` ``` Custom elements you created under `app/Livewire/PageComposerElements/` are not affected unless they explicitly reference the old name. ### 5. Quill toolbar is now configurable [](#5-quill-toolbar-is-now-configurable) By default, the toolbar is restricted to a Normal / H1–H3 dropdown. If you need the old unrestricted toolbar back, set `quill_toolbar` in `config/pagecomposer.php` — see the [Quill Editor Toolbar](#quill-editor-toolbar) section above for examples. ### 6. Livewire deprecations removed [](#6-livewire-deprecations-removed) The package no longer uses `wire:model.defer`, `$queryString`, or the legacy `get*Property()` accessor pattern. These continued to work in Livewire 3 but are gone in Livewire 4. If you extended internal components, mirror the same patterns (`#[Url]`, `#[Computed]`, plain `wire:model`). ### Health Score 47 — FairBetter than 93% of packages Maintenance88 Actively maintained with recent releases Popularity12 Limited adoption so far Community7 Small or concentrated contributor base Maturity67 Established project with proven stability Bus Factor1 Top contributor holds 100% of commits — single point of failure 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 ~15 days Recently: every ~9 days Total 36 Last Release 69d ago Major Versions 0.1.0 → 1.0.12026-04-08 PHP version history (2 changes)v0.0.1-alphaPHP ^8.1 1.0.1PHP ^8.3 ### Community Maintainers ![](https://www.gravatar.com/avatar/74704c23d1a3ea66e1ddd18de4e90635ea4a2c28838e72ad49ba947694f7988e?d=identicon)[Flobbos](/maintainers/Flobbos) --- Top Contributors [![Flobbos](https://avatars.githubusercontent.com/u/21225457?v=4)](https://github.com/Flobbos "Flobbos (23 commits)") --- Tags laravelcmslivewire ### Embed Badge ![Health badge](/badges/flobbos-page-composer/health.svg) ``` [![Health](https://phpackages.com/badges/flobbos-page-composer/health.svg)](https://phpackages.com/packages/flobbos-page-composer) ``` ### Alternatives [laravel/pulse Laravel Pulse is a real-time application performance monitoring tool and dashboard for your Laravel application. 1.7k14.1M122](/packages/laravel-pulse)[robsontenorio/mary Gorgeous UI components for Livewire powered by daisyUI and Tailwind 1.5k531.0k21](/packages/robsontenorio-mary)[nasirkhan/laravel-starter A CMS like modular Laravel starter project. 1.4k2.7k](/packages/nasirkhan-laravel-starter)[tomshaw/electricgrid A feature-rich Livewire package designed for projects that require dynamic, interactive data tables. 119.2k](/packages/tomshaw-electricgrid)[a2insights/filament-saas Filament Saas for A2Insights 171.5k](/packages/a2insights-filament-saas) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)