PHPackages                             codprez/laravel-page-builder - 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. codprez/laravel-page-builder

ActiveLibrary

codprez/laravel-page-builder
============================

Predefined section-based page builder for Laravel + Inertia + React.

v1.0.0(1mo ago)189↑2158.4%MITTypeScriptPHP ^8.2

Since Mar 20Pushed 1mo agoCompare

[ Source](https://github.com/obalaweb/laravel-page-builder)[ Packagist](https://packagist.org/packages/codprez/laravel-page-builder)[ RSS](/packages/codprez-laravel-page-builder/feed)WikiDiscussions main Synced 1mo ago

READMEChangelogDependencies (3)Versions (2)Used By (0)

Laravel Page Builder
====================

[](#laravel-page-builder)

[![Latest Version on Packagist](https://camo.githubusercontent.com/eaf8b9d337d0a0d0f8252b3ad44df251fcafc6403fcca2dfe35ef342f2b9c50e/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f636f647072657a2f6c61726176656c2d706167652d6275696c6465722e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/codprez/laravel-page-builder)[![License](https://camo.githubusercontent.com/3d956df0a803e9ddd1fe69e389190147c54a1fbf761dc612cd468670451e3a31/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f6c2f636f647072657a2f6c61726176656c2d706167652d6275696c6465722e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/codprez/laravel-page-builder)[![PHP Version](https://camo.githubusercontent.com/0dd176a07f9b5b633fcd8d037612f4ff4acc4b42eda92b72f740da418e4e2da3/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f7068702d762f636f647072657a2f6c61726176656c2d706167652d6275696c6465722e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/codprez/laravel-page-builder)

[![Laravel Page Builder](.github/art/banner.png)](.github/art/banner.png)

A predefined section-based page builder for Laravel + Inertia.js + React. Pages are composed of typed sections with a drag-and-drop editor, Eloquent models, API resources, per-section forms, and a section renderer.

---

Features
--------

[](#features)

- 12 built-in section types: hero, about, features, stats, team, testimonials, CTA, gallery, FAQ, contact, rich text, and video
- Eloquent `Page` and `PageSection` models with JSON data casting
- API Resources (`PageResource`, `PageSectionResource`) ready for your controllers
- Drag-and-drop React section editor powered by `@dnd-kit`
- Per-section forms with typed fields and image/media support
- `SectionRenderer` React component for frontend rendering
- Custom section registration via `PageBuilder::register()`
- Configurable media model integration
- Tailwind CSS v4 compatible frontend components

---

Requirements
------------

[](#requirements)

- PHP ^8.2
- Laravel ^12.0
- Inertia.js v2
- React 19
- `@dnd-kit/core`, `@dnd-kit/sortable`, `@dnd-kit/utilities`
- `lucide-react`
- Tailwind CSS v4

---

Installation
------------

[](#installation)

### 1. Install the package via Composer

[](#1-install-the-package-via-composer)

```
composer require codprez/laravel-page-builder
```

### 2. Publish the config file

[](#2-publish-the-config-file)

```
php artisan vendor:publish --tag=page-builder-config
```

### 3. Publish and run the migrations

[](#3-publish-and-run-the-migrations)

```
php artisan vendor:publish --tag=page-builder-migrations
php artisan migrate
```

### 4. Install frontend dependencies

[](#4-install-frontend-dependencies)

```
npm install @dnd-kit/core @dnd-kit/sortable @dnd-kit/utilities lucide-react
```

### 5. Copy frontend assets

[](#5-copy-frontend-assets)

Publish the frontend TypeScript types and React components into your application:

```
php artisan vendor:publish --tag=page-builder-resources
```

This copies the following into your `resources/js` directory:

- `types/page-builder.ts` — TypeScript type definitions
- `components/page-builder/` — React editor and renderer components

---

Configuration
-------------

[](#configuration)

After publishing, `config/page-builder.php` will contain:

```
return [
    'media_model' => \App\Models\Media::class,
];
```

The configured media model must expose `id`, `url`, and optionally `thumbnail_url` attributes. It is used by image fields in section forms and the `ImageUpload` / `MediaSelector` integration points.

---

Usage
-----

[](#usage)

### Page and Section CRUD

[](#page-and-section-crud)

Use the `Page` and `PageSection` models directly via Eloquent:

```
use Codprez\PageBuilder\Models\Page;
use Codprez\PageBuilder\Models\PageSection;

// Create a page
$page = Page::create([
    'title'            => 'Home',
    'slug'             => 'home',
    'status'           => 'published',
    'is_home'          => true,
]);

// Attach a section
$page->sections()->create([
    'type'       => 'hero',
    'order'      => 1,
    'is_visible' => true,
    'data'       => [
        'title'    => 'Welcome',
        'subtitle' => 'Build pages visually.',
    ],
]);

// Retrieve a page with its sections
$page = Page::with('sections')->where('slug', 'home')->firstOrFail();
```

### Using PageResource in Controllers

[](#using-pageresource-in-controllers)

```
use Codprez\PageBuilder\Http\Resources\PageResource;
use Codprez\PageBuilder\Models\Page;

class PageController extends Controller
{
    public function show(string $slug): PageResource
    {
        $page = Page::with(['image', 'sections'])->where('slug', $slug)->firstOrFail();

        return new PageResource($page);
    }

    public function index(): \Illuminate\Http\Resources\Json\AnonymousResourceCollection
    {
        return PageResource::collection(
            Page::with(['image', 'sections'])->orderBy('order')->get()
        );
    }
}
```

### Rendering a Page with Inertia

[](#rendering-a-page-with-inertia)

```
use Inertia\Inertia;
use Codprez\PageBuilder\Http\Resources\PageResource;
use Codprez\PageBuilder\Models\Page;

class FrontController extends Controller
{
    public function show(string $slug): \Inertia\Response
    {
        $page = Page::with(['image', 'sections' => fn ($q) => $q->where('is_visible', true)->orderBy('order')])
            ->where('slug', $slug)
            ->where('status', 'published')
            ->firstOrFail();

        return Inertia::render('Pages/Show', [
            'page' => new PageResource($page),
        ]);
    }
}
```

### Registering Custom Sections

[](#registering-custom-sections)

Use `PageBuilder::register()` in a service provider to add your own section types:

```
use Codprez\PageBuilder\PageBuilder;

class AppServiceProvider extends ServiceProvider
{
    public function boot(): void
    {
        PageBuilder::register('my_section',
            requiredFields: ['title'],
            imageFields: ['image_id']
        );
    }
}
```

Custom sections will appear in the section picker inside the editor and can be rendered by adding a corresponding case to your `SectionRenderer` usage.

---

Frontend Setup
--------------

[](#frontend-setup)

### Types

[](#types)

After publishing resources, import types from the copied file:

```
import type { Page, PageSection, SectionType } from '@/types/page-builder'
```

### SectionEditor

[](#sectioneditor)

Use `SectionEditor` in your admin pages to allow drag-and-drop section management:

```
import { SectionEditor } from '@/components/page-builder/section-editor'
import { useForm } from '@inertiajs/react'
import type { PageSection } from '@/types/page-builder'

export default function EditPage({ page }: { page: Page }) {
    const { data, setData, put } = useForm({
        sections: page.sections,
    })

    return (
         { e.preventDefault(); put(`/pages/${page.id}`) }}>
             setData('sections', sections)}
            />
            Save

    )
}
```

The `SectionEditor` component requires `ImageUpload` and `MediaSelector` components to be present in your application at `@/components/image-upload` and `@/components/media-selector`. Implement these to handle image uploads and media library selection according to your application's needs.

### SectionRenderer

[](#sectionrenderer)

Use `SectionRenderer` to render published page sections on the frontend:

```
import { SectionRenderer } from '@/components/page-builder/section-renderer'
import type { Page } from '@/types/page-builder'

export default function ShowPage({ page }: { page: Page }) {
    return (

            {page.sections.map(section => (

            ))}

    )
}
```

### SectionPicker

[](#sectionpicker)

To allow users to add new sections, use `SectionPicker` standalone:

```
import { SectionPicker } from '@/components/page-builder/section-picker'

 addSection(type)} />
```

---

Section Types
-------------

[](#section-types)

TypeDescription`hero`Full-width hero with title, subtitle, background image, and CTA`about`About block with heading, body text, and optional image`features`Grid of feature cards with icon, title, and description`stats`Row of numeric statistics with labels`team`Team member grid with name, role, bio, and photo`testimonials`Customer/user testimonial carousel or grid`cta`Call-to-action banner with heading and button`gallery`Image gallery grid or masonry layout`faq`Accordion-style frequently asked questions`contact`Contact form or contact details block`rich_text`Free-form rich text / HTML content block`video`Embedded video block (YouTube, Vimeo, or direct URL)---

Contributing
------------

[](#contributing)

Contributions are welcome. Please read [CONTRIBUTING.md](CONTRIBUTING.md) before submitting a pull request.

---

Changelog
---------

[](#changelog)

See [CHANGELOG.md](CHANGELOG.md) for a history of changes.

---

License
-------

[](#license)

This package is open-sourced software licensed under the [MIT license](LICENSE).

###  Health Score

44

—

FairBetter than 91% of packages

Maintenance96

Actively maintained with recent releases

Popularity15

Limited adoption so far

Community8

Small or concentrated contributor base

Maturity46

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 60% 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

Unknown

Total

1

Last Release

49d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/55b8d54ccbfac6a5169aae8b947c1e9f5bf2df45dbc9752d94abd3dc52da14a6?d=identicon)[obalaweb](/maintainers/obalaweb)

---

Top Contributors

[![obalaweb](https://avatars.githubusercontent.com/u/49390404?v=4)](https://github.com/obalaweb "obalaweb (3 commits)")[![jivanobala-source](https://avatars.githubusercontent.com/u/268674462?v=4)](https://github.com/jivanobala-source "jivanobala-source (2 commits)")

---

Tags

laravelcmsinertiareactsectionspage builder

### Embed Badge

![Health badge](/badges/codprez-laravel-page-builder/health.svg)

```
[![Health](https://phpackages.com/badges/codprez-laravel-page-builder/health.svg)](https://phpackages.com/packages/codprez-laravel-page-builder)
```

###  Alternatives

[yadahan/laravel-authentication-log

Laravel Authentication Log provides authentication logger and notification for Laravel.

416632.8k5](/packages/yadahan-laravel-authentication-log)[essa/api-tool-kit

set of tools to build an api with laravel

52680.5k](/packages/essa-api-tool-kit)[api-platform/laravel

API Platform support for Laravel

59126.4k6](/packages/api-platform-laravel)[dragon-code/laravel-http-logger

Logging incoming HTTP requests

319.8k3](/packages/dragon-code-laravel-http-logger)[bjuppa/laravel-blog

Add blog functionality to your Laravel project

483.3k1](/packages/bjuppa-laravel-blog)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)