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

Go to file

jos dd22b97eb0 Renamed field 'jsoneditor' to 'meta' in extended JSON Patch		2017-12-17 13:53:06 +01:00
docs	Implemented custom key bindings	2017-07-24 15:50:18 +02:00
examples	Add package-lock.json	2017-09-08 10:29:39 +02:00
misc	Released version 5.1.1	2016-01-16 10:55:45 +01:00
src	Renamed field 'jsoneditor' to 'meta' in extended JSON Patch	2017-12-17 13:53:06 +01:00
src_old	Moved old source code to `src_old`	2016-07-12 13:56:04 +02:00
test	Renamed field 'jsoneditor' to 'meta' in extended JSON Patch	2017-12-17 13:53:06 +01:00
.babelrc	Created gulp task `compile-es5-lib` (WIP, not yet compiling less into css)	2017-01-01 20:08:10 +01:00
.flowconfig	React API mostly working (WIP)	2016-12-22 12:08:32 +01:00
.gitignore	Don't expand search result itself when focusing it	2017-09-08 10:29:09 +02: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	Fixed #308 : wrong positioning of label "empty array" when `onEditable` returns false	2016-07-05 20:09:34 +02:00
LICENSE	Updated license information on some other places too	2016-08-13 21:23:43 +02:00
README.md	Restructured search data model	2016-12-30 13:45:43 +01:00
favicon.ico	Move favicon to root	2017-10-06 10:55:31 +02:00
gulpfile.js	Try get react bundle working (js is ok, css still broken)	2017-01-10 20:03:09 +01:00
index.js	Worked out react bundle (not yet working though)	2016-12-26 10:18:26 +01:00
package-lock.json	Refactored model to use Symbol	2017-12-15 14:02:42 +01:00
package.json	Refactored model to use Symbol	2017-12-15 14:02:42 +01:00
react.js	Move react to devDependencies	2017-09-03 17:07:17 +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, Internet Explorer 9+.

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

Install via npm:

npm install jsoneditor

Versions

There are two versions of jsoneditor available: a full version and a minimalist version.

Full version

If you're not sure which version to use, use the full version: jsoneditor.js.

Minimalist version

The minimalist version, jsoneditor-minimalist.js, has excluded the following libraries:

ace (via brace), used for the code editor.
ajv, used for JSON schema validation.

This reduces the the size of the minified and gzipped JavaScript considerably.

When to use the minimalist version?

If you don't need the mode "code" and don't need JSON schema validation.
Or if you want to provide ace and/or ajv yourself via the configuration options, for example when you already use Ace in other parts of your web application too and don't want to bundle the library twice.

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

https://github.com/angular-tools/ng-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">

    <script src="jsoneditor/dist/jsoneditor.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 = 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 file ./dist/jsoneditor.js and ./dist/jsoneditor-minimalist.js and corresponding source maps.
For development, start a develop server which automatically updates the library when a source file has changed:
```
npm start
```
This will update ./dist/jsoneditor.js on every change in the source code, but it will NOT update the minimalist version.
Run unit tests:
```
npm test
```
or to watch for changes and re-run tests automatically:
```
npm run watch:test
```