PHPackages                             cmskit/jsoneditor - 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. cmskit/jsoneditor

ActiveLibrary[Utility & Helpers](/categories/utility)

cmskit/jsoneditor
=================

062JavaScript

Since Aug 21Pushed 11y ago1 watchersCompare

[ Source](https://github.com/cmskit/lib-jsoneditor)[ Packagist](https://packagist.org/packages/cmskit/jsoneditor)[ RSS](/packages/cmskit-jsoneditor/feed)WikiDiscussions master Synced 1mo ago

READMEChangelogDependenciesVersions (1)Used By (0)

JSON Editor
===========

[](#json-editor)

Website: Github:

### Description

[](#description)

JSON Editor is a web-based tool to view, edit, and format JSON. It has various modes such as a tree editor, a code editor, and a plain text editor.

The editor can be used as a component in your own web application. The library can be loaded as CommonJS module, AMD module, or as a regular javascript file.

Supported browsers: Chrome, Firefox, Safari, Opera, Internet Explorer 9+.

[![json editor](https://camo.githubusercontent.com/fbd3ef110fa73466ec1aba88b1e1da7f2ede427abd1642f0a51c75fdaf5696a7/68747470733a2f2f7261772e6769746875622e636f6d2f6a6f7364656a6f6e672f6a736f6e656469746f722f6d61737465722f6d6973632f6a736f6e656469746f722e706e67)](https://camo.githubusercontent.com/fbd3ef110fa73466ec1aba88b1e1da7f2ede427abd1642f0a51c75fdaf5696a7/68747470733a2f2f7261772e6769746875622e636f6d2f6a6f7364656a6f6e672f6a736f6e656469746f722f6d61737465722f6d6973632f6a736f6e656469746f722e706e67)

[![code editor](https://camo.githubusercontent.com/cd97bb5c9d4e1cf74635bce580d5a4ce37a7ec2b2b724695b9f59d93700d78ea/68747470733a2f2f7261772e6769746875622e636f6d2f6a6f7364656a6f6e672f6a736f6e656469746f722f6d61737465722f6d6973632f636f6465656469746f722e706e67)](https://camo.githubusercontent.com/cd97bb5c9d4e1cf74635bce580d5a4ce37a7ec2b2b724695b9f59d93700d78ea/68747470733a2f2f7261772e6769746875622e636f6d2f6a6f7364656a6f6e672f6a736f6e656469746f722f6d61737465722f6d6973632f636f6465656469746f722e706e67)

### Features

[](#features)

#### Tree editor

[](#tree-editor)

- Edit, add, move, remove, and duplicate fields and values.
- Change type of values.
- Sort arrays and objects.
- Colorized code.
- Search & highlight text in the treeview.
- Undo and redo all actions.

#### Code editor

[](#code-editor)

- Format and compact JSON.
- Colorized code (powered by Ace).
- Inspect JSON (powered by Ace).

#### Text editor

[](#text-editor)

- Format and compact JSON.

### Documentation

[](#documentation)

- Documentation:
    - [API](https://github.com/josdejong/jsoneditor/tree/master/docs/api.md)
    - [Usage](https://github.com/josdejong/jsoneditor/tree/master/docs/usage.md)
    - [Shortcut keys](https://github.com/josdejong/jsoneditor/tree/master/docs/shortcut_keys.md)
- [Examples](https://github.com/josdejong/jsoneditor/tree/master/examples)
- [Source](https://github.com/josdejong/jsoneditor)
- [History](https://github.com/josdejong/jsoneditor/blob/master/HISTORY.md)

### Install

[](#install)

with npm:

```
npm install jsoneditor

```

with bower:

```
bower install jsoneditor

```

download:

### Use

[](#use)

```
>

        // create the editor
        var container = document.getElementById("jsoneditor");
        var editor = new JSONEditor(container);

        // set json
        var json = {
            "Array": [1, 2, 3],
            "Boolean": true,
            "Null": null,
            "Number": 123,
            "Object": {"a": "b", "c": "d"},
            "String": "Hello World"
        };
        editor.set(json);

        // get json
        var json = editor.get();

```

### Build

[](#build)

The code of the JSON Editor is located in the folder `./src`. To build jsoneditor:

- Install dependencies:

    ```
    npm install

    ```
- Build JSON Editor:

    ```
    npm run build

    ```

    This will generate the files `./jsoneditor.js`, `./jsoneditor.css`, and
    minified versions in the root of the project.
- To rebuild the assets (not necessary):

    ```
    npm run build-assets

    ```

    This will build Ace editor, and then generates necessary ace editor files in the folder `./asset/ace`, and jsonlint in the folder `./asset/jsonlint`.

###  Health Score

21

—

LowBetter than 18% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity8

Limited adoption so far

Community7

Small or concentrated contributor base

Maturity41

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 100% 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.

### Community

Maintainers

![](https://www.gravatar.com/avatar/9c4305eee60c9e61896e8a121b0fe72e33e546cf8770d22718f946f309dd255e?d=identicon)[cmskit](/maintainers/cmskit)

---

Top Contributors

[![taubmann](https://avatars.githubusercontent.com/u/1518022?v=4)](https://github.com/taubmann "taubmann (2 commits)")

### Embed Badge

![Health badge](/badges/cmskit-jsoneditor/health.svg)

```
[![Health](https://phpackages.com/badges/cmskit-jsoneditor/health.svg)](https://phpackages.com/packages/cmskit-jsoneditor)
```

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)