README

Filament integration for Editor.js with a standalone HTML renderer.

Installation

composer require aaix/filament-editor-js

php artisan filament:assets

Usage

Use the EditorJs component in your Filament Resource form. You can use the included HtmlRenderer to render the content (including Minified CSS/JS) without Alpine dependencies in any location.

use Aaix\FilamentEditorJs\Forms\Components\EditorJs;
use Aaix\FilamentEditorJs\Support\HtmlRenderer\HtmlRenderer;
use Filament\Forms\Components\Placeholder;
use Filament\Schemas\Schema;
use Illuminate\Support\HtmlString;

public static function configure(Schema $schema): Schema
{
   return $schema
      ->schema([
         Tabs::make('description_tabs')
            ->tabs([
               Tab::make(__('Editor'))
                  ->schema([
                     EditorJs::make('description')
                        ->required()
                        ->label(__('Description'))
                        ->columnSpanFull(),
                  ]),
               Tab::make(__('Preview'))
                  ->schema([
                     Placeholder::make('html_preview')
                        ->hiddenLabel()
                        ->columnSpanFull()
                        ->content(function ($get) {
                           $jsonState = $get('description');
                           $html = HtmlRenderer::render($jsonState);
                           return new HtmlString("<div style='max-width:45rem;padding:0 2rem;'>{$html}</div>");
                        }),
                  ]),
            ]),
        ]);
}

Frontend Rendering

To render the content in your Blade views (e.g., Blog Post):

{!! \Aaix\FilamentEditorJs\Support\HtmlRenderer\HtmlRenderer::render($post->content) !!}

The renderer automatically injects required CSS and vanilla JS for galleries/accordions.

API / Headless Usage

Since the renderer produces self-contained HTML (including styles and scripts), you can easily serve it via an API:

use Aaix\FilamentEditorJs\Support\HtmlRenderer\HtmlRenderer;
use App\Models\Post;
use Illuminate\Support\Facades\Route;

Route::get('/api/posts/{post}', function (Post $post) {
    return response()->json([
        'id' => $post->id,
        'title' => $post->title,
        'content_html' => HtmlRenderer::render($post->content), // Returns fully rendered HTML string
    ]);
});

Configuration

Image Upload location

The plugin will automatically create a scalable directory structure for all uploaded images and also creates different image sizes for the gallery block, used in srcset attributes.

use Aaix\FilamentEditorJs\Forms\Components\EditorJs;
EditorJs::make('content')
        ->imageDisk('s3') // Defaults to 'public'
        ->imageDirectory('my_photos') // Defaults to 'editorjs-images'

The directory structure would look like this:

editorjs-images
└── 0d
    └── e3
        └── 1a
            ├── f2-880d-4e7b-b402-b1b2cc685e6f_1k.webp
            ├── f2-880d-4e7b-b402-b1b2cc685e6f_2k.webp
            ├── f2-880d-4e7b-b402-b1b2cc685e6f_3k.webp
            ├── f2-880d-4e7b-b402-b1b2cc685e6f_4k.webp
            ├── f2-880d-4e7b-b402-b1b2cc685e6f_500.webp
            └── f2-880d-4e7b-b402-b1b2cc685e6f_original.jpg

Included Tools & Plugins

The editor comes pre-configured with the following block tools:

• Typography: Header, Paragraph, Quote, Code, Delimiter.
• Lists: Unordered, Ordered, Checklist.
• Structure: Table, Collapsible (Accordion), Alert.
• Media: Gallery (Masonry & Slider layouts with Lightbox).

@editorjs/checklist
@editorjs/code
@editorjs/delimiter
@editorjs/editorjs
@editorjs/header
@editorjs/list
@editorjs/quote
@editorjs/table
@kiberpro/editorjs-gallery
editorjs-collapsible-block
editorjs-alert

Contributing

Need another editor.js plugin? Contributions are welcome! Please submit a Pull Request or open an issue to discuss your ideas.

License

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