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

Go to file

jos 8416944f5c Fixed `editor.get()` manipulating the code when containing an error (see #191 )		2015-05-14 21:18:14 +02:00
dist	Implemented option `ace` to provide a custom version of the Ace editor. (see #173 , #176 )	2015-05-14 21:06:03 +02:00
docs	Implemented option `ace` to provide a custom version of the Ace editor. (see #173 , #176 )	2015-05-14 21:06:03 +02:00
examples	Moved the distribution files from root to the ./dist folder	2015-02-28 20:47:23 +01:00
misc	Released version 4.0.0	2015-02-28 21:17:03 +01:00
src	Fixed `editor.get()` manipulating the code when containing an error (see #191 )	2015-05-14 21:18:14 +02:00
test	Moved images also to /dist	2015-02-28 21:02:39 +01:00
.gitignore	Fixed #163 : updated npm dependencies	2015-02-10 22:14:45 +01:00
.npmignore	Released version 4.1.0	2015-03-15 15:11:36 +01:00
CONTRIBUTING.md	Added a CONTRIBUTING.md file	2015-02-10 21:41:47 +01:00
HISTORY.md	Fixed `editor.get()` manipulating the code when containing an error (see #191 )	2015-05-14 21:18:14 +02:00
LICENSE	first commit	2012-04-21 13:28:28 +02:00
NOTICE	Released version 3.2.0	2015-01-25 15:11:56 +01:00
README.md	Updated description of custom builds	2015-03-18 08:57:33 +01:00
bower.json	Released version 4.1.3, fixes for browserify	2015-03-17 20:25:50 +01:00
gulpfile.js	Released version 4.1.2	2015-03-15 15:31:50 +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	Fixed #186 : binding issue to `jsonlint.parse`.	2015-05-07 11:45:12 +02:00

README.md

JSON Editor

https://github.com/josdejong/jsoneditor http://jsoneditoronline.org/

Website: http://jsoneditoronline.org/ Github: https://github.com/josdejong/jsoneditor

Description

JSON Editor is a web-based tool to view, edit, and format 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+.

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 treeview.
Undo and redo all actions.

Code editor

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

Text editor

Format and compact JSON.

Documentation

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

Install

with npm:

npm install jsoneditor

with bower:

bower install jsoneditor

download:

http://jsoneditoronline.org/downloads/

Use

<!DOCTYPE HTML>
<html>
<head>
    <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 editor = new JSONEditor(container);

        // 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 root of the project.

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