JSON editor widget (josdejong/jsoneditor) for Yii 2.

Installs: 395 942

Dependents: 2

Suggesters: 3

Security: 0

Stars: 21

Watchers: 3

Forks: 2

Open Issues: 1


2.5.1 2022-06-16 20:34 UTC


JSON editor widget for Yii 2.
This widget uses JSON editor josdejong/jsoneditor.

License Latest Stable Version Code Coverage Scrutinizer Code Quality Code Climate


  • PHP 5.4 or later or HHVM 3;
  • Yii framework 2.


The preferred way to install this extension is through Composer.

To install, either run

php composer.phar require kdn/yii2-json-editor "*"

or add

"kdn/yii2-json-editor": "*"

to the require section of your composer.json file.


Minimal example:


use kdn\yii2\JsonEditor;

echo JsonEditor::widget(['name' => 'editor', 'value' => '{"foo": "bar"}']);

Alternatively you can pass already decoded JSON:


use kdn\yii2\JsonEditor;

echo JsonEditor::widget(['name' => 'editor', 'decodedValue' => ['foo' => 'bar']]);

With some options:

echo JsonEditor::widget(
        // JSON editor options
        'clientOptions' => [
            'modes' => ['code', 'form', 'preview', 'text', 'tree', 'view'], // all available modes
            'mode' => 'tree', // default mode
            'onModeChange' => 'function (newMode, oldMode) {
                console.log(this, newMode, oldMode);
        'collapseAll' => ['view'], // collapse all fields in "view" mode
        'containerOptions' => ['class' => 'container'], // HTML options for JSON editor container tag
        'expandAll' => ['tree', 'form'], // expand all fields in "tree" and "form" modes
        'name' => 'editor', // hidden input name
        'options' => ['id' => 'data'], // HTML options for hidden input
        'value' => '{"foo": "bar"}', // JSON which should be shown in editor

With ActiveForm and ActiveRecord:

echo $form->field($model, 'data')->widget(
        'clientOptions' => ['modes' => ['code', 'tree']],
        'decodedValue' => $model->data, /* if attribute contains already decoded JSON,
        then you should pass it as shown, otherwise omit this line */

To get instance of JSON editor on client side you can use the following JavaScript:

var jsonEditor = window[$('#YOUR-HIDDEN-INPUT-ID').data('json-editor-name')];
jsonEditor.set({"foo": "bar"});

How to set id for hidden input:

echo JsonEditor::widget(
        'name' => 'editor',
        'options' => ['id' => 'YOUR-HIDDEN-INPUT-ID'],
        'value' => '{}'

All possible ways to pass data and their precedence:

$model->data = '{"precedence": 5}';
echo $form->field(
    ['inputOptions' => ['value' => '{"precedence": 4}']]
        'decodedValue' => ['precedence' => 1],
        'value' => '{"precedence": 2}',
        'options' => ['value' => '{"precedence": 3}'],
        'defaultValue' => '{"precedence": 6}',

For code above widget will show {"precedence": 1}.
If decodedValue is not set then widget will show {"precedence": 2}, etc.

Please view public properties in class JsonEditor to get info about all available options, they documented comprehensively.


Make sure you installed all Composer dependencies (run composer update in the base directory of repository). Run PHPUnit in the base directory of repository:


Testing using Docker


Up and running

  1. Provide credentials for Composer:

    cp auth.json.example \

    I suggest to set GitHub OAuth token (also known as personal access token) in auth.json, however if you have doubts about security, or you are lazy to generate token then you can replace content of auth.json on {}, in most cases this will work.

  2. Build images for services:

    docker buildx bake --load --pull


    docker buildx bake --load --pull --no-cache --progress plain

    see docker buildx bake --help for details.

  3. Start service in background mode:

    docker-compose up --detach 8.1

    This command will start the service with PHP 8.1. Also allowed 7.4, 5.6, 8.1-alpine, 7.4-alpine and 5.6-alpine, see services defined in docker-compose.yml.

  4. Execute tests in the running container:

    docker-compose exec 8.1 ./vendor/bin/phpunit

    Alternatively you can start a shell in the running container and execute tests from it:

    docker-compose exec 8.1 sh
    $ ./vendor/bin/phpunit
  5. Stop and remove containers created by up:

    docker-compose down

    You may want to remove volumes along with containers:

    docker-compose down --volumes

Backward compatibility promise

yii2-json-editor is using Semver. This means that versions are tagged with MAJOR.MINOR.PATCH. Only a new major version will be allowed to break backward compatibility (BC).

PHP 8 introduced named arguments, which increased the cost and reduces flexibility for package maintainers. The names of the arguments for methods in yii2-json-editor is not included in our BC promise.