flobbos/page-composer

A livewire based CMS for Laravel

0.1.0 2026-03-17 14:49 UTC

Requires

• php: ^8.1
• blade-ui-kit/blade-heroicons: ^2.0
• flobbos/laravel-translatable-db: ^1.4
• illuminate/support: 10.*|11.*|12.*
• livewire/livewire: ^3.0|^4.0

MIT

• Alexej Krzewitzki

• cms
• laravel
• livewire

README

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

• Installation
• Dependency configuration
• Laravel layout
• Livewire
• Configuration
• Laravel compatibility

Installation

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

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

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

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

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

Please also check the Livewire section for two very important config settings to make things work correctly.

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

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

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

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

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

The configuration options have been kept fairly simple at the moment. The following options are available:

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

There's a small FAQ to help people get started. If you want to show this:

   'showFaq' => true,

Tags

If you want to use the tags provided by the package for the pages created:

    'useTags' => true,

Categories

PageComposer comes with a default categorisation option. If you want to use it:

    'useCategories' => true,

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

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

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.

Livewire

The package relies on Livewire 3 and Alpine 3.

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	LaravelCM
12.x	>0.0.1*
11.x	>0.0.1*
10.x	>0.0.1*

Lower versions of Laravel are not supported.