How to create preview for formData

I am building an Builder with a live preview using an iframe. On the left you have an exam with categories. When the user refreshes it should only update the iframe. When the user clicks opslaan (save) it should save to db.

Onload categories are not shown, when refreshing its already saved to db (because $this->form->getState())

Problem

On load the categories are not shown in the preview
When clicking refresh, the data is already saved to the database (because $this->form->getState())

What i tried
Adding ->dehydrated(true) on categories makes load on mount and also updates in the preview data. (still updates on preview)

Switching ->model($this->exam) to ->model(Exam::class). The preview is not automatically saving anymore, but when updating it creates a new record instead of updating the current (relation gone).

BanzaiOP•11/24/25, 2:48 PM

class ExamBuilder extends Component implements HasActions, HasSchemas
{
    use InteractsWithActions;
    use InteractsWithSchemas;

    public Exam $exam;
    public ?array $data = null;
    public int $previewKey = 0;

    public function mount(Exam $exam): void
    {
        $this->exam->load('categories.questions');
        $data = $this->exam->toArray();
        $this->form->fill($data);
    }

    public function form(Schema $schema): Schema
    {
        return $schema
            ->components([
                TextInput::make('name')
                    ->required()
                    ->label('exam name'),

                Repeater::make('categories')
                    ->relationship()
                    ->dehydrated(true)
                    ->label('category name')
                    ->extraAttributes(['class' => 'custom-repeater-categories'])
                    ->deletable(false)
                    ->addActionLabel('Nieuwe categorie')
                    ->schema([
                        TextInput::make('name')->required(),
                        ]),
                    ])

                ->model($this->exam)
                ->statePath('data');
    }
    public function refreshPreview(): void
    {
        $data = $this->form->getState();
        cache()->put("preview-{$this->exam->id}", $data);
        $this->previewKey++;
    }

    public function update(): void
    {
        $this->exam->update($this->form->getState());
        $this->form->model($this->exam)->saveRelationships();
        $this->refreshPreview();
    }
}

class ExamBuilder extends Component implements HasActions, HasSchemas
{
    use InteractsWithActions;
    use InteractsWithSchemas;

    public Exam $exam;
    public ?array $data = null;
    public int $previewKey = 0;

    public function mount(Exam $exam): void
    {
        $this->exam->load('categories.questions');
        $data = $this->exam->toArray();
        $this->form->fill($data);
    }

    public function form(Schema $schema): Schema
    {
        return $schema
            ->components([
                TextInput::make('name')
                    ->required()
                    ->label('exam name'),

                Repeater::make('categories')
                    ->relationship()
                    ->dehydrated(true)
                    ->label('category name')
                    ->extraAttributes(['class' => 'custom-repeater-categories'])
                    ->deletable(false)
                    ->addActionLabel('Nieuwe categorie')
                    ->schema([
                        TextInput::make('name')->required(),
                        ]),
                    ])

                ->model($this->exam)
                ->statePath('data');
    }
    public function refreshPreview(): void
    {
        $data = $this->form->getState();
        cache()->put("preview-{$this->exam->id}", $data);
        $this->previewKey++;
    }

    public function update(): void
    {
        $this->exam->update($this->form->getState());
        $this->form->model($this->exam)->saveRelationships();
        $this->refreshPreview();
    }
}

BBanzai I am building an Builder with a live preview using an iframe. On the left you ha...

LeandroFerreira•11/25/25, 12:16 PM

use ->model($this->exam)->model($this->exam). Check this section

You could also try something like this using entangle

public function form(Schema $schema): Schema
{
    return $schema
        ->columns(2)
        ->components([
            Repeater::make('categories')
                ->relationship()
                ->schema([
                    TextInput::make('name')
                ]),
            ViewField::make('result')
                ->view('result')
        ])
        ->model($this->exam)
        ->statePath('data');
}

public function form(Schema $schema): Schema
{
    return $schema
        ->columns(2)
        ->components([
            Repeater::make('categories')
                ->relationship()
                ->schema([
                    TextInput::make('name')
                ]),
            ViewField::make('result')
                ->view('result')
        ])
        ->model($this->exam)
        ->statePath('data');
}

<!-- resources/views/result.blade.php -->
<div x-data="{
    categories: @entangle('data.categories')
}">
    <code>
        <pre x-text="JSON.stringify(categories, null, 2)"></pre>
    </code>
</div>

<!-- resources/views/result.blade.php -->
<div x-data="{
    categories: @entangle('data.categories')
}">
    <code>
        <pre x-text="JSON.stringify(categories, null, 2)"></pre>
    </code>
</div>

Rendering a form in a Blade view - Components - Filament

How to create preview for formData

Similar Threads

Similar Threads

Similar Threads