PHPackages aaix/filament-editor-js - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Templating & Views](/categories/templating) 4. / 5. aaix/filament-editor-js ActiveLibrary[Templating & Views](/categories/templating) aaix/filament-editor-js ======================= Filament Editor.js Integration v1.1.0(3mo ago)0108MITPHPPHP >=8.2 Since Jan 2Pushed 3mo agoCompare [ Source](https://github.com/jonaaix/filament-editor-js)[ Packagist](https://packagist.org/packages/aaix/filament-editor-js)[ RSS](/packages/aaix-filament-editor-js/feed)WikiDiscussions main Synced today READMEChangelogDependencies (10)Versions (13)Used By (0) Filament Editor.js ================== [](#filament-editorjs) Filament integration for [Editor.js](https://editorjs.io) with a standalone HTML renderer. [ ![Latest Version on Packagist](https://camo.githubusercontent.com/67a00052366450631e1442c6e774f2ac77de25f15f69151e75aa27240e6c398d/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f616169782f66696c616d656e742d656469746f722d6a732e7376673f7374796c653d666c61742d737175617265) ](https://packagist.org/packages/aaix/filament-editor-js) [ ![Total Downloads](https://camo.githubusercontent.com/b1e719b30cfa0b9472951f6efe9461f4629d0f0777fd8c671d5d1fceb65c5bda/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f616169782f66696c616d656e742d656469746f722d6a732e7376673f7374796c653d666c61742d737175617265) ](https://packagist.org/packages/aaix/filament-editor-js) [ ![License](https://camo.githubusercontent.com/7cbf90966ea6728e652939340cfab7be54f19265aa005e6a85c9709b44ecd2be/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f6c2f616169782f66696c616d656e742d656469746f722d6a732e7376673f7374796c653d666c61742d737175617265) ](https://github.com/aaix/filament-editor-js/blob/main/LICENSE) --- [ ![Filament Editor.js Logo](https://raw.githubusercontent.com/jonaaix/filament-editor-js/main/demo.webp) ](https://github.com/jonaaix/filament-editor-js) Installation ------------ [](#installation) ``` composer require aaix/filament-editor-js php artisan filament:assets ``` Usage ----- [](#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("{$html}"); }), ]), ]), ]); } ``` Frontend Rendering ------------------ [](#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 -------------------- [](#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 ------------- [](#configuration) ### Image Upload location [](#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 ---------------------------- [](#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 ------------ [](#contributing) Need another editor.js plugin? Contributions are welcome! Please submit a Pull Request or open an issue to discuss your ideas. License ------- [](#license) The MIT License (MIT). Please see [License File](https://www.google.com/search?q=LICENSE) for more information. ### Health Score 40 — FairBetter than 86% of packages Maintenance80 Actively maintained with recent releases Popularity11 Limited adoption so far Community6 Small or concentrated contributor base Maturity54 Maturing project, gaining track record Bus Factor1 Top contributor holds 100% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~7 days Recently: every ~13 days Total 12 Last Release 106d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/8d8ec042829e0d4060243b6c1067768dd31773ace52982c6ac4a4fbef207cbfd?d=identicon)[aaix](/maintainers/aaix) --- Top Contributors [![jonaaix](https://avatars.githubusercontent.com/u/15804690?v=4)](https://github.com/jonaaix "jonaaix (20 commits)") --- Tags laravelwysiwygfilamenteditorjsblock editor ### Embed Badge ![Health badge](/badges/aaix-filament-editor-js/health.svg) ``` [![Health](https://phpackages.com/badges/aaix-filament-editor-js/health.svg)](https://phpackages.com/packages/aaix-filament-editor-js) ``` ### Alternatives [laravel/sail Docker files for running a basic Laravel application. 1.9k205.7M1.3k](/packages/laravel-sail)[laravel/ai The official AI SDK for Laravel. 1.0k3.2M194](/packages/laravel-ai)[tallstackui/tallstackui TallStackUI is a powerful suite of Blade components that elevate your workflow of Livewire applications. 725172.4k14](/packages/tallstackui-tallstackui)[roots/acorn Framework for Roots WordPress projects built with Laravel components. 9762.4M131](/packages/roots-acorn)[laravel/mcp Rapidly build MCP servers for your Laravel applications. 77022.3M150](/packages/laravel-mcp)[flarum/core Delightfully simple forum software. 201.4M2.3k](/packages/flarum-core) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)