Download the PHP package coderstm/laravel-page-builder without Composer

Laravel Page Builder

A modern page builder for Laravel that allows you to build dynamic pages using layouts, sections and JSON rendering. It includes a visual editor, layout system, reusable sections and multi-theme support.

Features

• Blade-native rendering — sections and blocks are regular Blade views with typed PHP objects
• @schema() directive — declare settings, child blocks, and presets directly in Blade templates
• Visual editor — React SPA with iframe live preview, drag-and-drop, and inline text editing
• JSON-based storage — page data stored as JSON files on disk for fast reads and easy version control
• JSON templates — fallback layouts for pages without a per-page JSON; supports wrapper, variable interpolation ({{ $page->title }}), and theme overrides
• Per-page Layouts — site header and footer are configurable per-page, stored in the page JSON
• Recursive block nesting — container blocks (rows, columns) can hold child blocks to any depth
• Theme blocks — register global block types that any section can accept via @theme wildcard
• 21+ Field Types — from basic text inputs to advanced color pickers, icon selectors, and custom types
• Page Meta Persistence — SEO titles and descriptions are automatically managed and persisted across dynamic and preserved pages
• Editor mode — data-editor-* attributes injected only when the editor is active
• Publishable assets — config, views, migrations, and frontend assets can be published independently

Requirements

• PHP 8.2+
• Laravel 11.x or 12.x

Installation

The package auto-registers its service provider via Laravel's package discovery.

Run the install command

This single command:

1. Publishes config/pagebuilder.php
2. Publishes database migrations
3. Publishes the compiled editor frontend assets to public/pagebuilder/
4. Scaffolds default starter views into your app:
   • resources/views/layouts/page.blade.php — base HTML layout
   • resources/views/sections/ — announcement, header, hero, rich-text, content, footer
   • resources/views/blocks/ — row, column, text

Options

Run migrations (if not using --migrate)

Configuration reference

config/pagebuilder.php is published to your application's config/ directory:

Publish resources individually

If you need to re-publish a specific resource:

Creating Sections

Sections are the top-level building blocks of a page. Each section is a Blade view that declares its schema using the @schema() directive.

1. Create the Blade file

Place section templates in the configured sections directory (default: resources/views/sections/).

2. Understanding the @schema() array

3. Section template API

Creating Blocks

Blocks are reusable components that live inside sections (or inside other blocks). Block Blade files live in the configured blocks directory (default: resources/views/blocks/).

Theme Blocks

Theme blocks are registered globally and can be referenced by any section that declares ['type' => '@theme'] in its blocks array.

Block template API

Block Detection: Local vs Theme Reference

In @schema blocks arrays, entries are detected as either local definitions or theme-block references:

Page JSON Structure

Pages are stored as JSON files in the configured pages directory. Each page contains sections, their settings, nested blocks, and render order.

Templates

Templates are JSON fallback layouts for pages that have no per-page page builder JSON file and no custom Blade view. They let you define a single file that controls which sections a whole category of pages renders — without requiring a separate pages/{slug}.json for every page.

Page resolution order

Templates are only consulted when both step 1 and step 2 miss. A template never overrides an existing page JSON.

Creating a template

Place template files in resources/views/templates/ (configurable via config('pagebuilder.templates')).

The page.json file is the default template. Any page without a page JSON, and without a specific template selected, renders through it.

Template JSON schema

Assigning a template to a page

Set the template column on the Page model:

Or when creating a page:

Template names map to filenames without the .json extension:

If the selected template file does not exist, the package falls back to page.json. If page.json also does not exist, a 404 is returned.

The wrapper property

The wrapper field wraps all rendered section HTML in a single HTML element. The value uses a CSS-selector-like syntax:

Supported wrapper tags: <div>, <main>, <section>.

Output:

Variable interpolation

Template section settings support {{ $page->attribute }} placeholders. At render time they are replaced with the corresponding attribute from the Page Eloquent model.

Any column on the Page model can be used: title, slug, content, meta_title, meta_description, meta_keywords, or any custom column. Missing or null attributes resolve to an empty string.

Alternative template example

layout: false — rendering without header/footer

Set "layout": false to skip the layout zone system entirely. No @sections('header') or @sections('footer') zones are rendered:

Theme-aware templates

If a theme is active, TemplateStorage checks the theme's views/templates/ directory first. This allows themes to override the default page.json template or add new template files without touching the application's templates directory:

Rendering Pages

In Controllers

Programmatic Page Rendering

Registering Additional Paths

You can register additional directories for section and block discovery:

Manual Registration

Register a section or block programmatically without a Blade file:

Setting Types

The @schema settings array supports these built-in types:

Editor

Accessing the Editor

The editor is available at:

Protect it with authentication middleware in your config:

Editor Authorization

In addition to middleware, you can protect the editor frame from unauthorized access by registering a custom authorization callback. This is useful for more granular checks, such as verifying user roles or permissions.

When the callback returns false, the editor frame will not load, and the page will be rendered as a regular public page even if ?editor=true is present in the URL.

Register the callback in your AppServiceProvider or a dedicated service provider:

Editor API Endpoints

Editor Helpers

Custom Asset Providers

By default the editor stores uploaded assets through the built-in Laravel provider (storage/app/public/pagebuilder). You can replace it with any storage backend — S3, Cloudflare R2, Cloudinary, DigitalOcean Spaces — by passing a custom provider to PageBuilder.init().

Provider interface

A provider is a plain JavaScript object with two async methods:

The url field is what gets stored in page JSON and rendered in Blade — it must be a publicly accessible URL.

Registering the provider

AWS S3 / DigitalOcean Spaces / Cloudflare R2

Keep uploads server-side through a thin Laravel proxy controller that writes to S3 using Storage::disk('s3'):

For Spaces/R2, configure the S3-compatible endpoint in .env — no JS changes required:

Cloudinary (direct browser upload)

For the full provider contract and additional examples, see the Developer Documentation.

Blade Directives

Architecture Reference

Key Classes

Reporting Issues

When reporting bugs, please include:

• PHP and Laravel versions
• Package version
• Steps to reproduce
• Expected vs actual behavior
• Relevant error messages or logs

Layout Sections

Pages can define a layout key for per-page overrides of structural slots (header, footer) that live outside the main @yield('content') block in your Blade layout.

Render layout sections in your Blade layout file using @sections():

Layout sections are non-sortable — their position is determined by the Blade layout. In the editor they appear as fixed rows above and below the sortable page section list.

Rules:

• Keys that match "header" or carry position: "top" render in the top zone; everything else goes to the bottom zone.
• disabled: true causes @sections() to return an empty string for that slot.
• _name overrides the schema display name in the editor (same as page sections).

Theme Integration

The package integrates with qirolab/laravel-themer for multi-theme support.

Register Theme Sections and Blocks

If you're using a theme system you can set the active theme and the package will automatically register theme sections and blocks when the expected view paths exist. This is convenient when using a theme package or qirolab/laravel-themer.

Global Theme Settings

Define global design tokens (colors, fonts, spacing) in config/pagebuilder.php. Values are persisted to a JSON file (default: resources/settings.json) under a pagebuilder key, allowing them to coexist with other application settings.

Schema fields

css_var — live preview sync

When a css_var is declared on a setting, the editor updates that CSS custom property on the preview iframe's :root in real time as the user types — no page reload required. Declare your tokens in your theme stylesheet to consume them:

google_font setting type

Use type: 'google_font' to let editors pick a Google Font from a curated library. The selected font is automatically injected as a <link> tag in the page <head> via the @pbThemeFont Blade directive:

Accessing values in Blade

$theme is a ThemeSettings instance shared with all Blade views:

Use $theme->get('key', 'default') for dot-notation access with a fallback, or $theme->key for top-level keys.

Editor reset options

In the Theme Settings panel editors can:

• Reset individual setting — hover a setting row and click the reset icon to restore its default value.
• Reset all — click Reset all in the panel header to restore every setting to its schema default in one action. Both reset paths trigger live CSS var updates immediately.

Theme Middleware

You can use the provided ThemeMiddleware to automatically apply themes based on route parameters or session data.

Artisan Commands

License

This package is released under a Non-Commercial Open Source License.

• Free to use, modify, and distribute for non-commercial purposes.
• Commercial use is not permitted without a separate license agreement.
• Contact [email protected] for commercial licensing.

See LICENSE.md for the full license text.