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

Go to file

Jos de Jong 8cec2df3c7 Implement flexible expansion of parts of a large array		2020-10-14 17:52:51 +02:00
.github	Add Funding.yml to project	2019-11-16 14:56:04 +01:00
docs	Fix #908 : editor throwing an exception when switching from `'preview'` to `'code'` mode	2020-02-17 20:08:16 +01:00
examples	fix: upgrade react-scripts from 3.4.0 to 3.4.1 (#943 )	2020-03-24 20:10:00 +01:00
misc	Initial commit with a new Svelte setup	2020-04-25 22:32:20 +02:00
public	Refactor sorting to return a JSONPatchDocument	2020-08-30 14:38:12 +02:00
src	Implement flexible expansion of parts of a large array	2020-10-14 17:52:51 +02:00
tools	Add Ace to the project (not yet used)	2020-07-30 11:42:11 +02:00
.eslintrc.js	Add eslint to the project	2020-08-30 14:11:24 +02:00
.gitignore	Create dist/es folder for output bundle	2020-05-06 20:22:49 +02:00
CONTRIBUTING.md	Set up code style linting with standardjs	2019-08-28 13:21:14 +02:00
HISTORY.md	Update dependencies	2020-04-22 09:46:39 +02:00
LICENSE	first commit	2012-04-21 13:28:28 +02:00
NOTICE	Publish `v8.1.2`	2020-01-06 20:01:54 +01:00
README.md	Change maintenance badge to 2020	2020-01-04 09:53:35 +01:00
package-lock.json	Refactor sorting to return a JSONPatchDocument	2020-08-30 14:38:12 +02:00
package.json	Refactor sorting to return a JSONPatchDocument	2020-08-30 14:38:12 +02:00
rollup.config.js	Create main component JSONEditor and mode component TreeMode. Integrate svelte-simple-modal	2020-08-16 11:34:02 +02:00

README.md

JSON Editor

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

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

Documentation:
- API
- Usage
- Shortcut keys
Examples
Source
History

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

<!DOCTYPE HTML>
<html>
<head>
    <!-- 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>
</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