README

Filament YAML Editor

A rich YAML editor field for Filament powered by CodeMirror 6 with syntax highlighting, real-time linting, toolbar, and fullscreen support.

Version Compatibility

Installation

Install the package via Composer:

composer require jeffersongoncalves/filament-yaml-editor

Publish the assets:

php artisan filament:assets

Optionally publish the config file:

php artisan vendor:publish --tag=filament-yaml-editor-config

Usage

Form Field

use JeffersonGoncalves\FilamentYamlEditor\Forms\Components\YamlEditorField;

YamlEditorField::make('config')
    ->withToolbar()
    ->rules(['yaml'])

Fluent API

Full Example

YamlEditorField::make('config')
    ->height(400)
    ->withToolbar()
    ->castState()
    ->autoFormat()
    ->dark()
    ->rules(['yaml'])
    ->placeholder("# paste your YAML here\n")

Table Action (View YAML in Modal)

Use the ViewYamlAction to add a button in your table that opens a modal with the YAML content displayed in a read-only CodeMirror editor.

use JeffersonGoncalves\FilamentYamlEditor\Actions\ViewYamlAction;

Filament v4 / v5 (branches 2.x and 3.x):

->recordActions([
    ViewYamlAction::make()
        ->column('config')       // required: the model attribute to display
        ->editorHeight(500)      // optional, default 400
        ->dark(),                // optional
])

Filament v3 (branch 1.x):

->actions([
    ViewYamlAction::make()
        ->column('config'),
])

Infolist Entry

Displays YAML content in a read-only CodeMirror editor.

use JeffersonGoncalves\FilamentYamlEditor\Infolists\Components\YamlEditorEntry;

YamlEditorEntry::make('config')
    ->height(400)
    ->dark()

Eloquent Cast

Use the YamlCast to automatically convert between YAML strings and arrays in your Eloquent models:

use JeffersonGoncalves\FilamentYamlEditor\Casts\YamlCast;

class Setting extends Model
{
    protected $casts = [
        'config' => YamlCast::class,
    ];
}

Validation Rule

Use the ValidYaml rule directly or via the yaml string alias:

use JeffersonGoncalves\FilamentYamlEditor\Rules\ValidYaml;

// As a rule object
$request->validate([
    'config' => ['required', new ValidYaml],
]);

// As a string alias (registered by the service provider)
$request->validate([
    'config' => ['required', 'yaml'],
]);

Features

• CodeMirror 6 — Modern editor with syntax highlighting, line numbers, and bracket matching for YAML
• Real-time linting — Client-side YAML validation via js-yaml with inline error markers
• Server-side validation — ValidYaml rule using symfony/yaml
• Toolbar — Format (pretty-print), copy to clipboard, fullscreen toggle
• Theme support — Auto-detects Filament dark mode and system prefers-color-scheme, or force with ->dark() / ->light()
• Bidirectional sync — Full Livewire $entangle support with wire:ignore for seamless form integration
• Cast support — YamlCast for Eloquent models, ->castState() for form field hydration/dehydration
• Table action — ViewYamlAction opens a modal with read-only syntax-highlighted YAML
• Infolist entry — YamlEditorEntry for read-only YAML display in resource view pages
• Fullscreen mode — Full-screen editing with mobile safe-area insets
• No Tailwind dependency — CSS built with PostCSS (autoprefixer + cssnano), works in any Filament panel

Building Assets

The package ships with pre-compiled assets in resources/dist/. To rebuild after modifying JS or CSS sources:

pnpm install
pnpm build

For development with watch mode:

pnpm dev

Testing

composer test

Code Quality

composer analyse   # PHPStan level 5
composer format    # Laravel Pint

Changelog

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

License

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