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.
Cross browser testing for JSONEditor is generously provided by BrowserStack
JSONEditor has various modes, with the following features.
- 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).
- Colorized code (powered by Ace).
- Inspect JSON (powered by Ace).
- Format and compact JSON.
- Repair JSON.
- JSON schema validation (powered by ajv).
- Format and compact JSON.
- Repair JSON.
- JSON schema validation (powered by ajv).
- 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).
with npm (recommended):
npm install jsoneditor
Note that to use JSONEditor in Internet Explorer 11, it is necessary to load a polyfill for
Promisein your application.
<!DOCTYPE HTML><html><head><!-- when using the mode "code", it's important to specify charset utf-8 --><metahttp-equiv="Content-Type" content="text/html;charset=utf-8"><linkhref="jsoneditor/dist/jsoneditor.min.css" rel="stylesheet" type="text/css"><scriptsrc="jsoneditor/dist/jsoneditor.min.js"></script></head><body><divid="jsoneditor" style="width: 400px; height: 400px;"></div><script>// create the editorconstcontainer=document.getElementById("jsoneditor")constoptions={}consteditor=newJSONEditor(container,options)// set jsonconstinitialJson={"Array": [1,2,3],"Boolean": true,"Null": null,"Number": 123,"Object": {"a": "b","c": "d"},"String": "Hello World"}editor.set(initialJson)// get jsonconstupdatedJson=editor.get()</script></body></html>The code of the JSON Editor is located in the folder ./src. To build
jsoneditor:
Install dependencies:
npm installBuild JSON Editor:
npm run buildThis 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 startThis will update
./jsoneditor.jsand./jsoneditor.cssin the dist folder on every change, but it will NOT update the minified versions as that's an expensive operation.
Run unit tests:
npm test
Run code linting (JavaScript Standard Style):
npm run lint
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