README

This is a Filament field wrapper for the Unlayer editor. It delegates the editor runtime to community-sdks/unlayer-livewire, which wraps the Alpine and TypeScript SDK packages.

Try The Example

If you want to try the package quickly in a Laravel app, install it and then install the bundled quick demo:

This package ships its example through zpmlabs/laravel-package-quick-demo. The quick demo installer sets up an isolated demo environment for the package so you can try the field without manually wiring routes, database connections, migrations, seeders, or demo views into your main application.

composer require zpmlabs/filament-unlayer
php artisan quick-demo:install filament-unlayer-demo

To inspect the registered demo or see its route details:

php artisan quick-demo:show filament-unlayer-demo

The bundled Filament Unlayer Demo includes an email editor tab and a web/page editor tab, both backed by isolated quick-demo data.

Requirements

PHP 8.3+
Laravel 13+
Filament 5.x

Installation

You can install the package via composer:

composer require zpmlabs/filament-unlayer

Install The Livewire Browser Asset

The Filament field depends on the browser asset published by community-sdks/unlayer-livewire.

Install it with:

php artisan unlayer-livewire:install

This publishes the compiled browser file to:

public/unlayer-livewire.js

After upgrading the Livewire package or rebuilding that browser asset locally, publish the latest file again:

php artisan vendor:publish --tag=unlayer-livewire-assets --force

If you also want to publish the Livewire config to customize upload storage or other package options:

php artisan unlayer-livewire:install --config

To overwrite previously published files during install:

php artisan unlayer-livewire:install --force

You can also publish assets or config manually:

php artisan vendor:publish --tag=unlayer-livewire-assets --force
php artisan vendor:publish --tag=unlayer-livewire-config

Version Compatibility

Filament 5 is the recommended target for both new and existing projects when an upgrade is possible, because the package flow and UI differ from the older Filament 4 integration.

Filament 5.x: use this package line, composer require zpmlabs/filament-unlayer:^3.0
Filament 4.x: use the v4 branch or the 2.x line, composer require zpmlabs/filament-unlayer:^2.0

Create a cast within your model:

protected $casts = [
   'content' => 'array',
];

The field stores the editor state as an array containing both html and design.

If you want to customize uploads or the template proxy route prefix, publish the Livewire package config:

php artisan vendor:publish --tag="unlayer-livewire-config"

Optionally, you can publish the views using

php artisan vendor:publish --tag="filament-unlayer-views"

Usage

As any other filament form field:

Unlayer::make('content')->required()

In case you want users to choose Unlayer stock templates from inside the editor, enable the template picker:

Unlayer::make('content')
    ->required()
    ->templatePicker()

The picker loads templates through the Livewire package's same-origin backend proxy and applies the selected design directly to the initialized editor.

You can customize the default stock template query:

Unlayer::make('content')
    ->templatePicker(options: [
        'type' => 'email', // or 'web'
        'premium' => false,
        'limit' => 20,
        'offset' => 0,
        'collection' => '',
        'sort' => 'recent',
    ])

You can customize the picker toolbar and panel labels:

Unlayer::make('content')
    ->templatePicker()
    ->templatePickerOptions([
        'label' => 'Template Editor',
        'triggerLabel' => 'Search templates',
        'title' => 'Templates',
        'placeholder' => 'Search templates',
        'emptyText' => 'No templates found.',
    ])

Live syncing is disabled by default. If you want every editor change to sync immediately through Livewire, enable it explicitly:

Unlayer::make('content')
    ->syncLive()

If you want to pass additional options to unlayer, which will join default object set by plugin with your additional data you can use:

Unlayer::make('description')
    ->additionalOptions([
        'option' => 'value'
    ])

The built-in Livewire proxy exists because Unlayer's stock template endpoints do not allow direct browser CORS requests. Behind the proxy, template search calls:

POST https://unlayer.com/templates/search
Content-Type: application/json

The field's templatePicker(options: [...]) values map to the upstream request body like this:

search     -> filter.name
type       -> filter.type
premium    -> filter.premium, "true" when true, "" when false
limit      -> perPage
offset     -> page, calculated as floor(offset / limit) + 1
collection -> filter.collection
sort       -> filter.sortBy

Selected templates are loaded through:

POST https://studio.unlayer.com/api/v1/graphql

The Livewire package also supports overriding its route prefix and middleware in config/unlayer-livewire.php.

Unlayer is extending filament Field class.

Changelog

Please see CHANGELOG for more information on what has changed recently.

License

The MIT License (MIT). Please see License File for more information.

zpmlabs / filament-unlayer

Maintainers

Package info

Fund package maintenance!

Statistics

Security