Github url

jsoneditor

by josdejong

josdejong /jsoneditor

A web-based tool to view, edit, format, and validate JSON

7.5K Stars 1.6K Forks Last release: Not found Apache License 2.0 1.5K Commits 159 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

JSON Editor

VersionDownloads MaintenanceLicenseFOSSA 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.

Use

<!-- when using the mode "code", it's important to specify charset utf-8 --><meta http-equiv="Content-Type" content="text/html;charset=utf-8"><link href="jsoneditor/dist/jsoneditor.min.css" rel="stylesheet" type="text/css"><script src="jsoneditor/dist/jsoneditor.min.js"></script>

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

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

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.