PHPackages ziming/json-field-for-backpack - 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. [Admin Panels](/categories/admin) 4. / 5. ziming/json-field-for-backpack ActiveLibrary[Admin Panels](/categories/admin) ziming/json-field-for-backpack ============================== A Json Editor Field for Backpack 1.5(5mo ago)3597.3k—0%6[3 issues](https://github.com/ziming/json-field-for-backpack/issues)MITBlade Since Oct 29Pushed 5mo ago3 watchersCompare [ Source](https://github.com/ziming/json-field-for-backpack)[ Packagist](https://packagist.org/packages/ziming/json-field-for-backpack)[ Docs](https://github.com/ziming/json-field-for-backpack)[ GitHub Sponsors](https://github.com/ziming)[ RSS](/packages/ziming-json-field-for-backpack/feed)WikiDiscussions main Synced 1mo ago READMEChangelog (10)Dependencies (1)Versions (15)Used By (0) JSON Field for Backpack 5 and 6 =============================== [](#json-field-for-backpack-5-and-6) [![Latest Version on Packagist](https://camo.githubusercontent.com/c0df651b402a050dfcfb96c965806d956d4234723e0a41b9c5d0f71c4def77cc/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f7a696d696e672f6a736f6e2d6669656c642d666f722d6261636b7061636b2e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/ziming/json-field-for-backpack)[![Total Downloads](https://camo.githubusercontent.com/1b5c7c82261c803d7084abba3510ea098b6b15526870bf157382c203c4956022/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f7a696d696e672f6a736f6e2d6669656c642d666f722d6261636b7061636b2e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/ziming/json-field-for-backpack) This package provides a `json` field type for the [Backpack for Laravel](https://backpackforlaravel.com/) administration panel. The field allows the admin to manually edit the contents of a column where a JSON is stored, using the [`josdejong/jsoneditor`](https://github.com/josdejong/jsoneditor) JS plugin. That means they'll have: - multiple modes of viewing the JSON (code, tree, form) - syntax highlighting - indented code - color picker - searching - undo & redo - etc. Of course, this field should only be used when the admin is savvy enough to know what JSON is. Otherwise they can completely mess up the structure/format of the JSON stored in the database column. Screenshots ----------- [](#screenshots) [![https://user-images.githubusercontent.com/1032474/97699650-e2e92b80-1a80-11eb-8320-3ac35e8a59a1.gif](https://user-images.githubusercontent.com/1032474/97699650-e2e92b80-1a80-11eb-8320-3ac35e8a59a1.gif)](https://user-images.githubusercontent.com/1032474/97699650-e2e92b80-1a80-11eb-8320-3ac35e8a59a1.gif) Backpack v6 with Tabler, light and dark modes [![https://github.com/ziming/json-field-for-backpack/assets/82019078/bdd36562-d46c-4966-ad02-4e765675eae4](https://private-user-images.githubusercontent.com/82019078/250934584-bdd36562-d46c-4966-ad02-4e765675eae4.gif?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3NzUyNzczODIsIm5iZiI6MTc3NTI3NzA4MiwicGF0aCI6Ii84MjAxOTA3OC8yNTA5MzQ1ODQtYmRkMzY1NjItZDQ2Yy00OTY2LWFkMDItNGU3NjU2NzVlYWU0LmdpZj9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNjA0MDQlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjYwNDA0VDA0MzEyMlomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWM5MmM5MTgzM2FmYTcwMjZkMGJjNTgyNmYyYmI2NmIyZjg0MGViMmYxOWJjMWJlM2M4ZDA2NzZjNzVhZTNiZTAmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0In0.l8veL6-gNAClkwfGndYVYpcrkR_g5ucnVqgYXL9Lq-I)](https://private-user-images.githubusercontent.com/82019078/250934584-bdd36562-d46c-4966-ad02-4e765675eae4.gif?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3NzUyNzczODIsIm5iZiI6MTc3NTI3NzA4MiwicGF0aCI6Ii84MjAxOTA3OC8yNTA5MzQ1ODQtYmRkMzY1NjItZDQ2Yy00OTY2LWFkMDItNGU3NjU2NzVlYWU0LmdpZj9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNjA0MDQlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjYwNDA0VDA0MzEyMlomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWM5MmM5MTgzM2FmYTcwMjZkMGJjNTgyNmYyYmI2NmIyZjg0MGViMmYxOWJjMWJlM2M4ZDA2NzZjNzVhZTNiZTAmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0In0.l8veL6-gNAClkwfGndYVYpcrkR_g5ucnVqgYXL9Lq-I) Installation ------------ [](#installation) Via Composer ``` composer require ziming/json-field-for-backpack ``` Usage ----- [](#usage) Inside your custom CrudController: ``` $this->crud->addField([ 'name' => 'column_name', 'type' => 'json', 'view_namespace' => 'json-field-for-backpack::fields', // OPTIONAL // Which modes should the JsonEditor JS plugin allow? // Please note that the first mode in the array will be used as the default mode. 'modes' => ['form', 'tree', 'code'], // Default value, if needed. If there is an actual value in the json column, // it will do an array_merge_recursive(), with the json column values // replacing the ones with the same keys. 'default' => [], ]); ``` Notice the `view_namespace` attribute - make sure that is exactly as above, to tell Backpack to load the field from this *addon package*, instead of assuming it's inside the *Backpack\\CRUD package*. Overwriting ----------- [](#overwriting) If you need to change the field in any way, you can easily publish the file to your app, and modify that file any way you want. But please keep in mind that you will not be getting any updates. **Step 1.** Copy-paste the blade file to your directory: ``` # create the fields directory if it's not already there mkdir -p resources/views/vendor/backpack/crud/fields # copy the blade file inside the folder we created above cp -i vendor/ziming/json-field-for-backpack/src/resources/views/fields/json.blade.php resources/views/vendor/backpack/crud/fields/json.blade.php ``` **Step 2.** Remove the vendor namespace wherever you've used the field: ``` $this->crud->addField([ - 'view_namespace' => 'json-field-for-backpack::fields' ]); ``` **Step 3.** Uninstall this package. Since it only provides one file - `json.blade.php`, and you're no longer using that file, it makes no sense to have the package installed: ``` composer remove ziming/json-field-for-backpack ``` Change log ---------- [](#change-log) Please see the [changelog](changelog.md) for more information on what has changed recently. Security -------- [](#security) If you discover any security related issues, please email [the author](composer.json) instead of using the issue tracker. Credits ------- [](#credits) - [ziming](https://github.com/ziming) - Created the initial field type - [vesper8](https://github.com/vesper8) - Polished & fixed bugs in the field type to allow multiple instances of the field - [stephanus-stuff](https://github.com/stephanus-stuff) - For updating the field type to be compatible with Backpack 4.0 and 4.1 - [Cristian Tabacitu](https://github.com/tabacitu) - For creating Backpack. - [josdejong](https://github.com/josdejong) - For creating [jsoneditor](https://github.com/josdejong/jsoneditor) - [All Contributors](../../contributors) License ------- [](#license) MIT. Please see the [license file](license.md) for more information. ### Health Score 51 — FairBetter than 96% of packages Maintenance71 Regular maintenance activity Popularity43 Moderate usage in the ecosystem Community14 Small or concentrated contributor base Maturity61 Established project with proven stability Bus Factor1 Top contributor holds 76.5% 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 ~156 days Recently: every ~223 days Total 13 Last Release 155d ago Major Versions 0.1.1 → 1.02020-11-02 ### Community Maintainers ![](https://www.gravatar.com/avatar/20bbe714df709bd31994360fbba65adce9f28fd930c5590265d4d58c452fe32e?d=identicon)[ziming.opensource](/maintainers/ziming.opensource) --- Top Contributors [![ziming](https://avatars.githubusercontent.com/u/679513?v=4)](https://github.com/ziming "ziming (13 commits)")[![tabacitu](https://avatars.githubusercontent.com/u/1032474?v=4)](https://github.com/tabacitu "tabacitu (3 commits)")[![malek77z](https://avatars.githubusercontent.com/u/82019078?v=4)](https://github.com/malek77z "malek77z (1 commits)") --- Tags hacktoberfestlaravellaravel-backpacklaravel-packagephpjsonlaravelfieldaddonadmin-panelbackpackBackpack for Laravel ### Embed Badge ![Health badge](/badges/ziming-json-field-for-backpack/health.svg) ``` [![Health](https://phpackages.com/badges/ziming-json-field-for-backpack/health.svg)](https://phpackages.com/packages/ziming-json-field-for-backpack) ``` ### Alternatives [izica/relations-widgets-for-backpack Widgets for preview model relations in laravel backpack 2927.3k](/packages/izica-relations-widgets-for-backpack)[digitallyhappy/toggle-field-for-backpack Easily toggle boolean attributes with a new field type. 2138.4k](/packages/digitallyhappy-toggle-field-for-backpack)[backpack/revise-operation Backpack interface for venturecraft/revisionable 43279.9k1](/packages/backpack-revise-operation)[backpack/pagemanager Create admin panels for presentation websites on Laravel, using page templates and Backpack\\CRUD. 371522.6k6](/packages/backpack-pagemanager)[backpack/backupmanager Admin interface for managing backups in Backpack, on Laravel 5.2+ 340375.9k2](/packages/backpack-backupmanager)[imokhles/signature-field-for-backpack Easily add signature field to backpack admin panel. 262.0k](/packages/imokhles-signature-field-for-backpack) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)