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

Go to file

jos fe3dffacf3 Drop broken images		2017-04-14 14:13:58 +02:00
dist	Switched to png image instead of svg	2017-04-14 14:10:07 +02:00
docs	Fixed embedded version of jsoneditor ace theme not being loaded in minimalist version. Added docs and example on loading a custom Ace editor (see #55 )	2017-01-03 20:23:03 +01:00
examples	Fixed embedded version of jsoneditor ace theme not being loaded in minimalist version. Added docs and example on loading a custom Ace editor (see #55 )	2017-01-03 20:23:03 +01:00
misc	Drop broken images	2017-04-14 14:13:58 +02:00
src	Released v5.5.11	2017-01-06 20:58:19 +01:00
test	Fix https://github.com/josdejong/jsoneditor/issues/314	2016-09-22 18:06:22 -04:00
.gitignore	Fixed #163 : updated npm dependencies	2015-02-10 22:14:45 +01:00
.npmignore	Include gulpfile in npm package	2015-12-28 12:16:38 +01:00
CONTRIBUTING.md	Fixed #244 : updated CONTRIBUTING file	2015-12-21 13:09:41 +01:00
HISTORY.md	Released v5.5.11	2017-01-06 20:58:19 +01:00
LICENSE	first commit	2012-04-21 13:28:28 +02:00
NOTICE	Released v5.5.11	2017-01-06 20:58:19 +01:00
README.md	Renamed images	2017-04-14 14:11:35 +02:00
bower.json	Fixed #202 : removed `version` field from bower.json	2015-12-31 14:24:13 +01:00
gulpfile.js	Fixed embedded version of jsoneditor ace theme not being loaded in minimalist version. Added docs and example on loading a custom Ace editor (see #55 )	2017-01-03 20:23:03 +01:00
index.js	Using brace to load Ace. Ace and jsonlint are now packed by default with JSONEditor. Removed all redundant build stuff for the assets.	2015-02-27 21:54:04 +01:00
package.json	Released v5.5.11	2017-01-06 20:58:19 +01: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, Internet Explorer 9+.

Cross browser testing for JSONEditor is generously provided by

json editor code editor

Features

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 tree view.
Undo and redo all actions.
JSON schema validation (powered by ajv).

Code editor

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

Text editor

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

Documentation

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

Install

with npm (recommended):

npm install jsoneditor

with bower:

bower install jsoneditor

There is a directive available for using JSONEditor in Angular.js:

https://github.com/isonet/angular-jsoneditor

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
        var container = document.getElementById("jsoneditor");
        var options = {};
        var editor = new JSONEditor(container, options);

        // 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();
    </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 run watch
```
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.

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