PHPackages valentin-morice/filament-json-column - 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. [Utility & Helpers](/categories/utility) 4. / 5. valentin-morice/filament-json-column ActiveLibrary[Utility & Helpers](/categories/utility) valentin-morice/filament-json-column ==================================== A simple package to view and edit your JSON columns in Filament v4.1.0(1w ago)60517.2k↓51.9%23MITPHPPHP ^8.2CI passing Since Apr 10Pushed 1w ago3 watchersCompare [ Source](https://github.com/valentin-morice/filament-json-column)[ Packagist](https://packagist.org/packages/valentin-morice/filament-json-column)[ Docs](https://github.com/valentin-morice/filament-json-column)[ RSS](/packages/valentin-morice-filament-json-column/feed)WikiDiscussions main Synced 3d ago READMEChangelog (10)Dependencies (28)Versions (23)Used By (0) filament-json-column ==================== [](#filament-json-column) v4.0 - Filament 5 Support ------------------------- [](#v40---filament-5-support) Now supports **Filament 5.x** (with Livewire 4)! Version Compatibility --------------------- [](#version-compatibility) - **v4.x**: Filament 5.x, Laravel 11.x / 12.x, PHP 8.2+ A simple package to view and edit your JSON columns in Filament. [![image](https://private-user-images.githubusercontent.com/100000204/321374124-41212480-f635-4d50-b967-cad5dbda6dc9.png?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3ODI5NDcwODAsIm5iZiI6MTc4Mjk0Njc4MCwicGF0aCI6Ii8xMDAwMDAyMDQvMzIxMzc0MTI0LTQxMjEyNDgwLWY2MzUtNGQ1MC1iOTY3LWNhZDVkYmRhNmRjOS5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjYwNzAxJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI2MDcwMVQyMjU5NDBaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT0zMjQzMmE1NDI0ZmNhOTEwNjQ5ZTg1ZTNmZmExNzJlMzY5NzRlZTIwZWRkZGUxZWY3ZTNhNTFkODRjN2MzZDJkJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZyZXNwb25zZS1jb250ZW50LXR5cGU9aW1hZ2UlMkZwbmcifQ.foPTvV4nMabQ2tz9sWawTNPNX3XGbVke5_xUYAURvMc)](https://private-user-images.githubusercontent.com/100000204/321374124-41212480-f635-4d50-b967-cad5dbda6dc9.png?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3ODI5NDcwODAsIm5iZiI6MTc4Mjk0Njc4MCwicGF0aCI6Ii8xMDAwMDAyMDQvMzIxMzc0MTI0LTQxMjEyNDgwLWY2MzUtNGQ1MC1iOTY3LWNhZDVkYmRhNmRjOS5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjYwNzAxJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI2MDcwMVQyMjU5NDBaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT0zMjQzMmE1NDI0ZmNhOTEwNjQ5ZTg1ZTNmZmExNzJlMzY5NzRlZTIwZWRkZGUxZWY3ZTNhNTFkODRjN2MzZDJkJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZyZXNwb25zZS1jb250ZW50LXR5cGU9aW1hZ2UlMkZwbmcifQ.foPTvV4nMabQ2tz9sWawTNPNX3XGbVke5_xUYAURvMc)[![image](https://private-user-images.githubusercontent.com/100000204/321374409-29591beb-524b-4671-b4ea-d5ec6b1f5705.png?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3ODI5NDcwODAsIm5iZiI6MTc4Mjk0Njc4MCwicGF0aCI6Ii8xMDAwMDAyMDQvMzIxMzc0NDA5LTI5NTkxYmViLTUyNGItNDY3MS1iNGVhLWQ1ZWM2YjFmNTcwNS5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjYwNzAxJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI2MDcwMVQyMjU5NDBaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1iNjY5NGI2YjQyODg2ZjhlZTBhYzhmNWJlNWZkNzI3ZjFjNDNmMzU2ZTM0YTE0ZjFlOWFkZjNjNTMyMjFmMGQwJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZyZXNwb25zZS1jb250ZW50LXR5cGU9aW1hZ2UlMkZwbmcifQ.1lnfKYX-8351Yx15RmfuvtC_dhCYg94Tv8B2maMsf-k)](https://private-user-images.githubusercontent.com/100000204/321374409-29591beb-524b-4671-b4ea-d5ec6b1f5705.png?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3ODI5NDcwODAsIm5iZiI6MTc4Mjk0Njc4MCwicGF0aCI6Ii8xMDAwMDAyMDQvMzIxMzc0NDA5LTI5NTkxYmViLTUyNGItNDY3MS1iNGVhLWQ1ZWM2YjFmNTcwNS5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjYwNzAxJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI2MDcwMVQyMjU5NDBaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1iNjY5NGI2YjQyODg2ZjhlZTBhYzhmNWJlNWZkNzI3ZjFjNDNmMzU2ZTM0YTE0ZjFlOWFkZjNjNTMyMjFmMGQwJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZyZXNwb25zZS1jb250ZW50LXR5cGU9aW1hZ2UlMkZwbmcifQ.1lnfKYX-8351Yx15RmfuvtC_dhCYg94Tv8B2maMsf-k) Installation ------------ [](#installation) You can install the package via composer: ``` composer require valentin-morice/filament-json-column ``` Usage ----- [](#usage) The filament-json-column plugin works as any other Filament Form Builder classes. Make sure the column on which it is called is cast to **JSON** or **array** within your Eloquent model. ``` use ValentinMorice\FilamentJsonColumn\JsonColumn; use ValentinMorice\FilamentJsonColumn\JsonInfolist; use Filament\Schemas\Schema; public static function form(Schema $schema): Schema { return $schema ->schema([ JsonColumn::make('example'), ]); } // An infolist component is also available. public static function infolist(Schema $schema): Schema { return $schema ->schema([ JsonInfolist::make('example'), ]); } ``` The form component provides you with two tabs: `Viewer` & `Editor`. The `Viewer` tab pretty prints your JSON data, while the `Editor` tab lets you edit it conveniently. All the methods provided by the plugin accept closures, injected with standard Filament \[utilities\](ction). ### Personalize the accent color [](#personalize-the-accent-color) The tab selector menu uses the `slateblue` CSS color by default. However, you can choose any other color: ``` JsonColumn::make('example')->accent(string '#FFFFFF'|Closure); // The input needs to be a valid CSS color ``` ### Display a single tab [](#display-a-single-tab) If you'd like to use only one of the tabs, without giving your user the possibility to switch to another, use the following methods: ``` JsonColumn::make('example')->editorOnly(bool|Closure); // Displays only the editor tab JsonColumn::make('example')->viewerOnly(bool|Closure); // Displays only the viewer tab ``` ### Change the height [](#change-the-height) ``` JsonColumn::make('example')->editorHeight(int 500|Closure); // Accepts an int, defaults to 300 JsonColumn::make('example')->viewerHeight(int 500|Closure); // Accepts an int, defaults to 300 ``` ### Editor modes [](#editor-modes) Customize the editor modes. Accepted values (and default) are: `['code', 'form', 'text', 'tree', 'view', 'preview']` ``` JsonColumn::make('example')->modes(array|Closure ['code', 'text', 'tree']); ``` ### Validation [](#validation) Values are validated as proper JSON by default. Translations ------------ [](#translations) The `Viewer` and `Editor` tab labels are translatable. Publish the translation files to customize them or add your own locale: ``` php artisan vendor:publish --tag="filament-json-column-translations" ``` This copies the files to `lang/vendor/filament-json-column/{locale}/json-column.php`. The displayed language follows your application's locale. Credits ------- [](#credits) I've taken inspiration from the following plugins: [Pretty JSON](https://github.com/novadaemon/filament-pretty-json) & [JSONeditor](https://github.com/invaders-xx/filament-jsoneditor). License ------- [](#license) The MIT License (MIT). Please see [License File](LICENSE.md) for more information. ### Health Score 62 — FairBetter than 99% of packages Maintenance98 Actively maintained with recent releases Popularity52 Moderate usage in the ecosystem Community19 Small or concentrated contributor base Maturity63 Established project with proven stability Bus Factor1 Top contributor holds 80% 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 ~44 days Total 19 Last Release 8d ago Major Versions v1.7.0 → v2.02025-03-26 v2.0.2 → v3.0.02025-12-21 v2.0.3 → v4.0.02026-06-26 PHP version history (2 changes)1.2.0PHP ^8.1 v3.0.0PHP ^8.2 ### Community Maintainers ![](https://avatars.githubusercontent.com/u/100000204?v=4)[Valentin Morice](/maintainers/valentin-morice)[@valentin-morice](https://github.com/valentin-morice) --- Top Contributors [![valentin-morice](https://avatars.githubusercontent.com/u/100000204?v=4)](https://github.com/valentin-morice "valentin-morice (24 commits)")[![abdulmejid-shemsu](https://avatars.githubusercontent.com/u/146857499?v=4)](https://github.com/abdulmejid-shemsu "abdulmejid-shemsu (3 commits)")[![Confectus](https://avatars.githubusercontent.com/u/52755615?v=4)](https://github.com/Confectus "Confectus (1 commits)")[![Jacotheron](https://avatars.githubusercontent.com/u/1516245?v=4)](https://github.com/Jacotheron "Jacotheron (1 commits)")[![safwendammak](https://avatars.githubusercontent.com/u/56032324?v=4)](https://github.com/safwendammak "safwendammak (1 commits)") --- Tags laravelvalentin-moricefilament-json-column ### Code Quality TestsPest Static AnalysisPHPStan Code StyleLaravel Pint ### Embed Badge ![Health badge](/badges/valentin-morice-filament-json-column/health.svg) ``` [![Health](https://phpackages.com/badges/valentin-morice-filament-json-column/health.svg)](https://phpackages.com/packages/valentin-morice-filament-json-column) ``` ### Alternatives [filament/filament A collection of full-stack components for accelerated Laravel app development. 3829.6M3.7k](/packages/filament-filament)[codewithdennis/filament-select-tree The multi-level select field enables you to make single selections from a predefined list of options that are organized into multiple levels or depths. 329530.5k29](/packages/codewithdennis-filament-select-tree)[filament/actions Easily add beautiful action modals to any Livewire component. 1327.7M79](/packages/filament-actions)[codebar-ag/laravel-filament-json-field A Laravel Filament JSON Field integration with CodeMirror support 1126.6k](/packages/codebar-ag-laravel-filament-json-field)[awcodes/richer-editor A collection of extensions and tools to enhance the Filament Rich Editor field. 3912.9k9](/packages/awcodes-richer-editor)[ralphjsmit/laravel-filament-components A collection of reusable components for Filament. 11079.1k6](/packages/ralphjsmit-laravel-filament-components) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)