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 v3.0.0(4mo ago)59431.3k↓11%22[2 issues](https://github.com/valentin-morice/filament-json-column/issues)[4 PRs](https://github.com/valentin-morice/filament-json-column/pulls)MITPHPPHP ^8.2CI passing Since Apr 10Pushed 4mo 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 1mo ago READMEChangelog (10)Dependencies (14)Versions (19)Used By (0) filament-json-column ==================== [](#filament-json-column) v3.0 - Filament 4 Support ------------------------- [](#v30---filament-4-support) Now supports **Filament 4.x** with the new unified schema system! Version Compatibility --------------------- [](#version-compatibility) - **v3.x**: Filament 4.x, Laravel 11.x, PHP 8.2+ - **v2.x**: Filament 3.x, Laravel 10.x+, PHP 8.1+ (maintenance branch) A simple package to view and edit your JSON columns in Filament 4. [![image](https://private-user-images.githubusercontent.com/100000204/321374124-41212480-f635-4d50-b967-cad5dbda6dc9.png?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3NzUyNzk2NDIsIm5iZiI6MTc3NTI3OTM0MiwicGF0aCI6Ii8xMDAwMDAyMDQvMzIxMzc0MTI0LTQxMjEyNDgwLWY2MzUtNGQ1MC1iOTY3LWNhZDVkYmRhNmRjOS5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjYwNDA0JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI2MDQwNFQwNTA5MDJaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1hM2FjNGMwMDUwNmZkNTE0ZGU0MDhhYTQ1YzczYjM5YjgwOWE4OWJlNTM5ODQ3MGFlY2FmYTkwNWRhMmNkYWQ2JlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCJ9.3W8jfS3juFZXdMuYXFjihiNZQ2rNBI54MHVaZhYwey0)](https://private-user-images.githubusercontent.com/100000204/321374124-41212480-f635-4d50-b967-cad5dbda6dc9.png?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3NzUyNzk2NDIsIm5iZiI6MTc3NTI3OTM0MiwicGF0aCI6Ii8xMDAwMDAyMDQvMzIxMzc0MTI0LTQxMjEyNDgwLWY2MzUtNGQ1MC1iOTY3LWNhZDVkYmRhNmRjOS5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjYwNDA0JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI2MDQwNFQwNTA5MDJaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1hM2FjNGMwMDUwNmZkNTE0ZGU0MDhhYTQ1YzczYjM5YjgwOWE4OWJlNTM5ODQ3MGFlY2FmYTkwNWRhMmNkYWQ2JlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCJ9.3W8jfS3juFZXdMuYXFjihiNZQ2rNBI54MHVaZhYwey0)[![image](https://private-user-images.githubusercontent.com/100000204/321374409-29591beb-524b-4671-b4ea-d5ec6b1f5705.png?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3NzUyNzk2NDIsIm5iZiI6MTc3NTI3OTM0MiwicGF0aCI6Ii8xMDAwMDAyMDQvMzIxMzc0NDA5LTI5NTkxYmViLTUyNGItNDY3MS1iNGVhLWQ1ZWM2YjFmNTcwNS5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjYwNDA0JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI2MDQwNFQwNTA5MDJaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT0xZGE1NDVhMzU4N2RlNzlmMzVhMTQ1MTFlYWRkZDhkNTFjZmQ4YmE4MWYyYzRmN2EwMjNhM2I3YWFhN2U3NWY1JlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCJ9.hL3su4D5vOBGlEi06Hr0E_5kctekKGwXAysloNXViJg)](https://private-user-images.githubusercontent.com/100000204/321374409-29591beb-524b-4671-b4ea-d5ec6b1f5705.png?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3NzUyNzk2NDIsIm5iZiI6MTc3NTI3OTM0MiwicGF0aCI6Ii8xMDAwMDAyMDQvMzIxMzc0NDA5LTI5NTkxYmViLTUyNGItNDY3MS1iNGVhLWQ1ZWM2YjFmNTcwNS5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjYwNDA0JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI2MDQwNFQwNTA5MDJaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT0xZGE1NDVhMzU4N2RlNzlmMzVhMTQ1MTFlYWRkZDhkNTFjZmQ4YmE4MWYyYzRmN2EwMjNhM2I3YWFhN2U3NWY1JlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCJ9.hL3su4D5vOBGlEi06Hr0E_5kctekKGwXAysloNXViJg) Installation ------------ [](#installation) You can install the package via composer: ``` composer require valentin-morice/filament-json-column ``` For Filament 3.x support, use version 2.x: ``` composer require valentin-morice/filament-json-column:^2.0 ``` 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](https://filamentphp.com/docs/4.x/schemas/advanced#form-component-utility-injection). ### 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. Compatibility ------------- [](#compatibility) - **Filament 4.x** (v3.x of this package) - **Filament 3.x** (v2.x of this package - see 2.x branch) - **Laravel 11.x** - **PHP 8.2+** 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 55 — FairBetter than 98% of packages Maintenance73 Regular maintenance activity Popularity52 Moderate usage in the ecosystem Community19 Small or concentrated contributor base Maturity62 Established project with proven stability Bus Factor1 Top contributor holds 72.7% 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 ~38 days Recently: every ~63 days Total 17 Last Release 148d ago Major Versions 1.6.1 → v2.02025-03-26 v1.7.0 → v2.0.12025-04-12 v2.0.2 → v3.0.02025-12-21 PHP version history (2 changes)1.2.0PHP ^8.1 v3.0.0PHP ^8.2 ### Community Maintainers ![](https://www.gravatar.com/avatar/5b2f03a5a84b7c0e6c54756b6cfcb56ccf6e5a6359203185782f604eeeb08170?d=identicon)[valentin-morice](/maintainers/valentin-morice) --- Top Contributors [![valentin-morice](https://avatars.githubusercontent.com/u/100000204?v=4)](https://github.com/valentin-morice "valentin-morice (16 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 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 [ralphjsmit/laravel-filament-components A collection of reusable components for Filament. 10972.2k2](/packages/ralphjsmit-laravel-filament-components)[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. 320392.1k17](/packages/codewithdennis-filament-select-tree)[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)[codebar-ag/laravel-filament-json-field A Laravel Filament JSON Field integration with CodeMirror support 1124.1k](/packages/codebar-ag-laravel-filament-json-field)[defstudio/filament-searchable-input A searchable autocomplete input for Filament forms 3212.4k](/packages/defstudio-filament-searchable-input)[jiten14/jitone-ai jitone-ai is a powerful FilamentPHP plugin that integrates AI-powered features directly into your Filament forms. 213.1k](/packages/jiten14-jitone-ai) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)