Builder

This guide explains how to render the Livewire Page Builder and handle its data.

Basic Implementation

To render the page builder, you need to:

1. Create a Livewire component
2. Add the builder component to your view
3. Handle the save event

Create a Livewire Component

<?php

namespace App\Livewire;

use Livewire\Attributes\On;
use Livewire\Component;
use Livewire\Attributes\Layout; 

#[Layout('lpb-layouts.builder-layout')]
class BuilderPage extends Component
{
    #[On('lpb-save-page')]
    public function savePage($data)
    {
        // Handle the saved page data
        // $data contains the entire page structure
        dd($data['content']);
    }

    public function render()
    {
        return view('livewire.builder-page');
    }
}

Add the Builder to Your View

<div>
    <livewire:lpb.builder :content="[]" />
</div>

Setting Initial Content

You can pass initial content to the builder using the content prop. The content should be an array of components with their properties.

<?php

namespace App\Livewire;

use App\Models\Page;
use Livewire\Attributes\On;
use Livewire\Component;
use Livewire\Attributes\Layout;

#[Layout('lpb-layouts.builder-layout')]
class BuilderPage extends Component
{
    public Page $page;

    public function render()
    {
        return view('livewire.builder-page');
    }
}

View:

<div>
    <livewire:lpb.builder :content="$page->content" />
</div>

Saving Content

The page builder emits a lpb-save-page event when the page is saved. The event data contains the entire page structure, including all components and their properties.

Example: Saving to Database

<?php

namespace App\Livewire;

// Your page model
use App\Models\Page;
use Livewire\Attributes\On;
use Livewire\Component;
use Livewire\Attributes\Layout;

#[Layout('lpb-layouts.builder-layout')]
class BuilderPage extends Component
{
    public Page $page;

    public $content;

    public function mount(Page $page)
    {
        $this->page = $page;
        $this->content = $page->content;
    }

    #[On('lpb-save-page')]
    public function savePage($data)
    {
        $this->page->update([
            'content' => $data['content'],
        ]);
    }

    public function render()
    {
        return view('livewire.builder-page');
    }
}