jsoneditor
    DefinitelyTyped icon, indicating that this package has TypeScript declarations provided by the separate @types/jsoneditor package

    9.5.2 • Public • Published

    JSON Editor

    Version Downloads Maintenance License FOSSA Status

    JSON Editor is a web-based tool to view, edit, format, and validate 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, Edge, Internet Explorer 11.

    json editor   code editor

    Cross browser testing for JSONEditor is generously provided by BrowserStack

    BrowserStack

    Features

    JSONEditor has various modes, with the following features.

    Tree mode

    • Change, add, move, remove, and duplicate fields and values.
    • Sort arrays and objects.
    • Transform JSON using JMESPath queries.
    • Colorized code.
    • Color picker.
    • Search & highlight text in the tree view.
    • Undo and redo all actions.
    • JSON schema validation (powered by ajv).

    Code mode

    • Colorized code (powered by Ace).
    • Inspect JSON (powered by Ace).
    • Format and compact JSON.
    • Repair JSON.
    • JSON schema validation (powered by ajv).

    Text mode

    • Format and compact JSON.
    • Repair JSON.
    • JSON schema validation (powered by ajv).

    Preview mode

    • Handle large JSON documents up to 500 MiB.
    • Transform JSON using JMESPath queries.
    • Format and compact JSON.
    • Repair JSON.
    • JSON schema validation (powered by ajv).

    Documentation

    Install

    with npm (recommended):

    npm install jsoneditor
    

    Note that to use JSONEditor in Internet Explorer 11, it is necessary to load a polyfill for Promise in your application.

    Alternatively, you can use another JavaScript package manager like https://yarnpkg.com/, or a CDN such as https://cdnjs.com/ or https://www.jsdelivr.com/.

    Use

    Note that in the following example, you'll have to change the urls jsoneditor/dist/jsoneditor.min.js and jsoneditor/dist/jsoneditor.min.css to match the place where you've downloaded the library, or fill in the URL of the CDN you're using.

    <!DOCTYPE HTML>
    <html lang="en">
    <head>
        <!-- when using the mode "code", it's important to specify charset utf-8 -->
        <meta charset="utf-8">
    
        <link href="jsoneditor/dist/jsoneditor.min.css" rel="stylesheet" type="text/css">
        <script src="jsoneditor/dist/jsoneditor.min.js"></script>
    </head>
    <body>
        <div id="jsoneditor" style="width: 400px; height: 400px;"></div>
    
        <script>
            // create the editor
            const container = document.getElementById("jsoneditor")
            const options = {}
            const editor = new JSONEditor(container, options)
    
            // set json
            const initialJson = {
                "Array": [1, 2, 3],
                "Boolean": true,
                "Null": null,
                "Number": 123,
                "Object": {"a": "b", "c": "d"},
                "String": "Hello World"
            }
            editor.set(initialJson)
    
            // get json
            const updatedJson = editor.get()
        </script>
    </body>
    </html>

    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 dist of the project.

    • To automatically build when a source file has changed:

      npm start
      

      This will update ./jsoneditor.js and ./jsoneditor.css in the dist folder on every change, but it will NOT update the minified versions as that's an expensive operation.

    Test

    Run unit tests:

    npm test
    

    Run code linting (JavaScript Standard Style):

    npm run lint
    

    Custom builds

    The source code of JSONEditor consists of CommonJS modules. JSONEditor can be bundled in a customized way using a module bundler like browserify or webpack. First, install all dependencies of jsoneditor:

    npm install
    

    To create a custom bundle of the source code using browserify:

    browserify ./index.js -o ./jsoneditor.custom.js -s JSONEditor
    

    The Ace editor, used in mode code, accounts for about one third of the total size of the library. To exclude the Ace editor from the bundle:

    browserify ./index.js -o ./jsoneditor.custom.js -s JSONEditor -x brace -x brace/mode/json -x brace/ext/searchbox
    

    To minify the generated bundle, use uglifyjs:

    uglifyjs ./jsoneditor.custom.js -o ./jsoneditor.custom.min.js -m -c
    

    Keywords

    none

    Install

    npm i jsoneditor

    DownloadsWeekly Downloads

    95,532

    Version

    9.5.2

    License

    Apache-2.0

    Unpacked Size

    5.86 MB

    Total Files

    122

    Last publish

    Collaborators

    • avatar