PHPackages nitsnets/filament-wysiwyg-json-formatter - 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. [Parsing & Serialization](/categories/parsing) 4. / 5. nitsnets/filament-wysiwyg-json-formatter ActiveLibrary[Parsing & Serialization](/categories/parsing) nitsnets/filament-wysiwyg-json-formatter ======================================== A Filament 4 form component for WYSIWYG editing with JSON output and user mentions support v1.0.6(4mo ago)05MITBladePHP ^8.2 Since Dec 19Pushed 4mo agoCompare [ Source](https://github.com/nitsnets/filament-wysiwyg-json-formatter)[ Packagist](https://packagist.org/packages/nitsnets/filament-wysiwyg-json-formatter)[ Docs](https://github.com/nitsnets/filament-wysiwyg-json-formatter)[ RSS](/packages/nitsnets-filament-wysiwyg-json-formatter/feed)WikiDiscussions master Synced 1mo ago READMEChangelog (5)Dependencies (8)Versions (8)Used By (0) Filament WYSIWYG JSON Formatter =============================== [](#filament-wysiwyg-json-formatter) A Filament 4 form component that provides a WYSIWYG editor with structured JSON output and user mentions support. Features -------- [](#features) - ✅ Full WYSIWYG editor with contenteditable - ✅ Bidirectional HTML ↔ structured JSON conversion - ✅ User mentions with search panel - ✅ Customizable toolbar with buttons: bold, italic, underline, strike, code, codeBlock, link, lists, checklist, headers, blockquote, textColor - ✅ Dark mode support - ✅ Optimized styles with PostCSS - ✅ Compatible with Livewire/Alpine.js - ✅ Structured and easy-to-process data format Installation ------------ [](#installation) Install the package via Composer: ``` composer require nitsnets/filament-wysiwyg-json-formatter ``` ### Package Development [](#package-development) If you're contributing to the package development, you need to install npm dependencies and compile assets: ``` npm install npm run build ``` Basic Usage ----------- [](#basic-usage) ``` use Nitsnets\FilamentWysiwygJsonFormatter\Forms\Components\WysiwygJsonFormatter; WysiwygJsonFormatter::make('content') ->label('Content') ->required() ``` Customize Toolbar Buttons ------------------------- [](#customize-toolbar-buttons) You can customize the buttons that appear in the toolbar: ``` WysiwygJsonFormatter::make('content') ->toolbarButtons([ 'bold', 'italic', 'underline', 'strike', 'code', 'codeBlock', 'link', 'unorderedList', 'orderedList', 'checklist', 'divider', 'h1', 'h2', 'h3', 'blockquote', 'textColor', ]) ``` ### Available Buttons [](#available-buttons) - **Text formatting**: `bold`, `italic`, `underline`, `strike`, `code` - **Blocks**: `codeBlock`, `h1`, `h2`, `h3`, `blockquote` - **Lists**: `unorderedList`, `orderedList`, `checklist` - **Others**: `link`, `divider`, `textColor` User Mentions ------------- [](#user-mentions) Enable user mentions by passing an array of users: ``` use App\Models\User; WysiwygJsonFormatter::make('content') ->mentions( User::all()->map(fn (User $user) => [ 'id' => (string) $user->id, 'label' => $user->name, ])->toArray() ) ``` Users can mention others by typing `@` followed by the user's name. Mentions are saved in structured JSON format: ``` { "type": "tag", "user": { "id": 123, "username": "John Doe", "name": "John Doe" } } ``` Data Format ----------- [](#data-format) The component saves and reads data in structured JSON format: ``` { "comment": [ { "text": "Hello ", "attributes": { "bold": true } }, { "type": "tag", "user": { "id": 123, "username": "John", "name": "John" } }, { "text": "\n", "attributes": {} } ] } ``` ### Supported Element Types [](#supported-element-types) - **Formatted text**: bold, italic, underline, strike, code - **Links**: with `link` attribute - **Text colors**: with `color-class` attribute - **Lists**: bullet, ordered, checklist (checked/unchecked) - **Blocks**: headers (h1-h3), blockquote, code-block - **Mentions**: `tag` type with user information - **Separators**: `divider` type Complete Example ---------------- [](#complete-example) ``` use Nitsnets\FilamentWysiwygJsonFormatter\Forms\Components\WysiwygJsonFormatter; use App\Models\User; WysiwygJsonFormatter::make('comment_content') ->label('Comment') ->placeholder('Write a comment or press «@» to mention users') ->required() ->toolbarButtons([ 'bold', 'italic', 'underline', 'link', 'unorderedList', 'orderedList', 'checklist', 'h2', 'h3', 'blockquote', ]) ->mentions( User::query() ->get() ->map(fn (User $user) => [ 'id' => (string) $user->id, 'label' => $user->name ?? $user->email, ]) ->toArray() ) ->columnSpanFull() ``` Validation ---------- [](#validation) The component is compatible with all Filament validation rules: ``` WysiwygJsonFormatter::make('content') ->required() ->minLength(10) ->maxLength(5000) ``` Translations ------------ [](#translations) The plugin includes translations in multiple European languages by default. ### Available Languages [](#available-languages) - 🇪🇸 Spanish (`es`) - 🇬🇧 English (`en`) - 🇩🇪 German (`de`) - 🇫🇷 French (`fr`) - 🇮🇹 Italian (`it`) - 🇵🇹 Portuguese (`pt`) - 🇵🇱 Polish (`pl`) - 🇳🇱 Dutch (`nl`) - 🇷🇺 Russian (`ru`) - 🇪🇸 Catalan (`ca`) ### Publishing Translations [](#publishing-translations) If you want to customize translations, you can publish the language files: ``` php artisan vendor:publish --tag=filament-wysiwyg-json-formatter-translations ``` This will copy the translation files to `lang/vendor/filament-wysiwyg-json-formatter/` where you can modify them. ### Adding New Languages [](#adding-new-languages) To add support for a new language: 1. Create a new directory in `lang/vendor/filament-wysiwyg-json-formatter/` with the language code (e.g., `fr`, `de`, `pt`) 2. Copy the content from `es/wysiwyg.php` or `en/wysiwyg.php` 3. Translate the texts to the new language ### Translation Structure [](#translation-structure) ``` return [ 'toolbar' => [ 'bold' => 'Bold', 'italic' => 'Italic', // ... more buttons ], 'mentions' => [ 'title' => 'Mention users', 'no_users_found' => 'No users found', 'close' => 'Close', ], 'json_preview' => [ 'title' => 'JSON Preview', 'close' => 'Close', ], 'prompts' => [ 'enter_url' => 'Enter URL:', ], ]; ``` Styles ------ [](#styles) Styles are loaded asynchronously only when the component is used (`loadedOnRequest`), which optimizes performance: - Full dark mode support - Optimized CSS with PostCSS and cssnano - Responsive design - Smooth animations and transitions Compatibility ------------- [](#compatibility) - **PHP**: ^8.2 - **Filament**: ^4.0 - **Laravel**: ^11.0 ### Dependencies [](#dependencies) The package requires the following dependencies which are automatically installed: - `mallardduck/blade-lucide-icons` - For Lucide icons used in the toolbar License ------- [](#license) MIT Credits ------- [](#credits) Developed by [Nitsnets](https://nitsnets.com) ### Health Score 37 — LowBetter than 83% of packages Maintenance74 Regular maintenance activity Popularity4 Limited adoption so far Community8 Small or concentrated contributor base Maturity52 Maturing project, gaining track record Bus Factor1 Top contributor holds 50% 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 ~0 days Total 7 Last Release 141d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/6cab57103838920c88ea7292c946c64dc08687fdc462d714c310e6d7c923d254?d=identicon)[borjants](/maintainers/borjants) --- Top Contributors [![borja-nts](https://avatars.githubusercontent.com/u/112074187?v=4)](https://github.com/borja-nts "borja-nts (8 commits)")[![borjants](https://avatars.githubusercontent.com/u/112074187?v=4)](https://github.com/borjants "borjants (8 commits)") --- Tags jsonlaraveleditorwysiwygmentionsfilamentfilament-plugin ### Code Quality TestsPest Code StyleLaravel Pint ### Embed Badge ![Health badge](/badges/nitsnets-filament-wysiwyg-json-formatter/health.svg) ``` [![Health](https://phpackages.com/badges/nitsnets-filament-wysiwyg-json-formatter/health.svg)](https://phpackages.com/packages/nitsnets-filament-wysiwyg-json-formatter) ``` ### Alternatives [awcodes/filament-tiptap-editor A Tiptap integration for Filament Admin/Forms. 399865.2k21](/packages/awcodes-filament-tiptap-editor)[croustibat/filament-jobs-monitor Background Jobs monitoring like Horizon for all drivers for FilamentPHP 254255.2k6](/packages/croustibat-filament-jobs-monitor)[novadaemon/filament-pretty-json Read-only field to show pretty json in your filamentphp forms 44359.2k2](/packages/novadaemon-filament-pretty-json)[schmeits/filament-character-counter This is a Filament character counter TextField and Textarea form field for Filament v4 and v5 33184.7k6](/packages/schmeits-filament-character-counter)[inerba/filament-db-config A Filament plugin for database-backed application settings and editable content, with caching and easy page generation. 329.1k](/packages/inerba-filament-db-config)[caresome/filament-neobrutalism-theme A neobrutalism theme for FilamentPHP admin panels 303.2k](/packages/caresome-filament-neobrutalism-theme) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)