PHPackages                             haringsrob/filament-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. [Utility & Helpers](/categories/utility)
4. /
5. haringsrob/filament-page-builder

ActiveLibrary[Utility & Helpers](/categories/utility)

haringsrob/filament-page-builder
================================

A visual page builder for Filament

3.0.8(1y ago)5334211[4 PRs](https://github.com/Sevendays-Digital/filament-page-builder/pulls)MITPHPPHP ^8.2

Since Sep 11Pushed 1y ago6 watchersCompare

[ Source](https://github.com/Sevendays-Digital/filament-page-builder)[ Packagist](https://packagist.org/packages/haringsrob/filament-page-builder)[ Docs](https://github.com/sevendays-digital/filament-page-builder)[ GitHub Sponsors](https://github.com/haringsrob)[ RSS](/packages/haringsrob-filament-page-builder/feed)WikiDiscussions main Synced 1mo ago

READMEChangelog (9)Dependencies (15)Versions (17)Used By (0)

A visual page builder for Filament
==================================

[](#a-visual-page-builder-for-filament)

[![Latest Version on Packagist](https://camo.githubusercontent.com/9c2faf717299a6093b56f3c36905da528327e247506d7d20c0a0128b1039c1a2/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f736576656e646179732f66696c616d656e742d706167652d6275696c6465722e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/sevendays/filament-page-builder)[![run-tests](https://github.com/Sevendays-Digital/filament-page-builder/actions/workflows/run-tests.yml/badge.svg)](https://github.com/Sevendays-Digital/filament-page-builder/actions/workflows/run-tests.yml)[![Fix PHP code style issues](https://github.com/Sevendays-Digital/filament-page-builder/actions/workflows/fix-php-code-style-issues.yml/badge.svg)](https://github.com/Sevendays-Digital/filament-page-builder/actions/workflows/fix-php-code-style-issues.yml)[![Total Downloads](https://camo.githubusercontent.com/427abd8642fb576c63f0390533dc58c8fd989092b0330d3b35aebfc1fd394500/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f736576656e646179732f66696c616d656e742d706167652d6275696c6465722e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/sevendays/filament-page-builder)

With this package you have a new Filament field (like Builder) but with a visual ui and dynamic types.

Please not that this is a pre-production package, there are many things potentially still bugged and it may not work together with some other packages (like translations).

Methods and flow may still change before a first release, so if you use it, keep in mind that a composer update may break it.

If you encounter issues, please provide a pull request.

To see a demo:

[![Simple demo](https://camo.githubusercontent.com/559db5500d6addf16f5a50c12855497cc2ebce1d5d1b7ef5818dd692d88306f5/68747470733a2f2f696d672e796f75747562652e636f6d2f76692f6b33543962416b6d344c492f302e6a7067)](https://www.youtube.com/watch?v=k3T9bAkm4LI)

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

[](#installation)

You can install the package via composer:

```
composer require sevendays/filament-page-builder
```

You can publish and run the migrations with:

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

You can publish the config file with (currently no config):

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

Optionally, you can publish the views using

```
php artisan vendor:publish --tag="filament-page-builder-views"
```

This is the contents of the published config file:

```
return [
];
```

Usage
-----

[](#usage)

Filament page builder is a custom Filament field that adds functionality on top of the Builder field.

13-11-2023 Preview is now opt-in via config.

- Preview can interfere with forms configured within blocks
- Preview sets all block fields to reactive, for the 'live' preview part

If you are ok with that, you can enable the preview via:

```
return [
    'enablePreview' => true,
];
```

To use this, create a Model and Resource as per the Filament documentation then do the following:

### 1. Generate a block

[](#1-generate-a-block)

You can use the command below to generate a block:

```
php artisan make:page-builder-block DemoBlock
```

This will create 2 files:

`app/Filament/Blocks/DemoBlock.php`: This is where you define the form fields and render view. `resources/views/filament/blocks/demo-block.blade.php`: This is how your block is supposed to be rendered.

The default generator provides just a 'title' field.

**NOTE**: All fields are translatable by default. However you can have shared fields by adding the following method with the field id's:

```
public static function getSharedFields(): array
{
    return ['show'];
}

public function form(): array
{
    return [
        TextInput::make('title'),
        Toggle::make('show')
    ];
}
```

### 2. Add the contract and trait to your model

[](#2-add-the-contract-and-trait-to-your-model)

In order to save blocks, you need to add the Blockable interface and HasBlocks trait to your model.

```