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

Go to file

jos 75c1497de1 Minor refactoring		2016-09-23 11:53:25 +02:00
dist	Put new build script into place, update unit testing, changed license to MIT, merged css and image into the bundled js file	2016-08-13 21:15:52 +02:00
docs	Some early refactoring of docs and examples	2016-08-13 21:38:32 +02:00
examples	Some early refactoring of docs and examples	2016-08-13 21:38:32 +02:00
misc	Released version 5.1.1	2016-01-16 10:55:45 +01:00
src	Minor refactoring	2016-09-23 11:53:25 +02:00
src_old	Moved old source code to `src_old`	2016-07-12 13:56:04 +02:00
test	Minor refactoring	2016-09-23 11:53:25 +02:00
.babelrc	Moved the logic for manipulating JSONData object into a separate file	2016-08-20 11:14:28 +02: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	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	Renamed `watch` script to `start`	2016-08-20 10:06:18 +02:00
bower.json	Fixed #202 : removed `version` field from bower.json	2015-12-31 14:24:13 +01:00
gulpfile.js	Improved errors. Fixed move before	2016-09-23 11:15:56 +02:00
package.json	Fixed duplicate variables	2016-09-17 15:23:31 +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

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/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.
To automatically build 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.