A Json Editor Field for Backpack

Fund package maintenance!

Installs: 9 380

Dependents: 1

Suggesters: 0

Security: 0

Stars: 17

Watchers: 3

Forks: 1

Open Issues: 1


1.1.2 2022-02-13 16:49 UTC

This package is auto-updated.

Last update: 2022-08-05 05:23:13 UTC


Latest Version on Packagist Total Downloads

This package provides a json field type for the Backpack for Laravel administration panel. The field allows the admin to manually edit the contents of a column where a JSON is stored, using the 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.




Via Composer

composer require ziming/json-field-for-backpack


Inside your custom CrudController:

    'name'  => 'column_name',
    'type'  => 'json',
    'view_namespace' => 'json-field-for-backpack::fields',
    // 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.


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:

-   '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

Please see the changelog for more information on what has changed recently.


If you discover any security related issues, please email the author instead of using the issue tracker.



MIT. Please see the license file for more information.

I am Hiring

Hiring for my employer now, if you are interested to work with me, feel free to contact me at the email in composer.json to discuss