Form with Textarea Content Preview

Filament 3
Also available in Filament 4/5 version

When your customers work on content - they often don't see the final result until it is live. Adding a content-preview modal is a great way to solve this problem.

FilamentExamples ThumbBase (13)

Get the Source Code:

Only This Example

$9

One-time payment

Full source code for Form with Textarea Content Preview
Downloadable ZIP file with the source code
Lifetime access to this example
GitHub Sign in with GitHub to buy

Sign in first, then complete your $9 checkout.

Best value — all 169 examples

FilamentExamples Membership

$99 /year
or
$199 lifetime
Access to code of all 169 examples
Future new examples and updates included
FilaCheck Pro package licence included
MCP server included
View membership plans

30-day money-back guarantee

How it works

To create this action, we first have to create our Fields:

app/Filament/Resources/PostResource.php

// ...
Forms\Components\RichEditor::make('rich_content')
->required()
->columnSpanFull(),
Forms\Components\Textarea::make('markdown_content')
->required()
->columnSpanFull(),
// ...

Currently, they do nothing but store the content. From here, we want to add a new action with slideOver to our form:

app/Filament/Resources/PostResource.php

// ...
Forms\Components\RichEditor::make('rich_content')
->required()
->columnSpanFull()
->hintAction(
fn(Forms\Get $get) => Forms\Components\Actions\Action::make('previewContent')
->slideOver()
// ....
The FULL tutorial is available after the purchase: in the Readme file of the official repository you would get invited to.