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

Go to file

jos 14db0632c2 Fixed #126 : lack of a semi colon at end of the bundled files		2014-08-28 21:20:14 +02:00
asset	Added all ace dependencies to ./asset/ace	2014-05-31 20:42:35 +02:00
docs	Added a documentation page with shortcut keys	2014-07-28 21:00:41 +02:00
examples	Improved the `editable` callback: now also provides the path to a node and the nodes value	2014-07-27 21:08:59 +02:00
img	Replaced ant build script with jake build script. Files moved around. Created package.json and component.json	2013-05-03 22:55:15 +02:00
misc	Released version 3.1.0	2014-07-28 21:11:55 +02:00
src	Some simplifications in parseJS	2014-08-01 09:46:50 +02:00
test	Improved the `editable` callback: now also provides the path to a node and the nodes value	2014-07-27 21:08:59 +02:00
.gitignore	Added zip task	2014-05-31 21:01:30 +02:00
.npmignore	Ignoring gulpfile in npm	2014-05-31 21:12:50 +02:00
HISTORY.md	Fixed #126 : lack of a semi colon at end of the bundled files	2014-08-28 21:20:14 +02:00
LICENSE	first commit	2012-04-21 13:28:28 +02:00
NOTICE	Added zip task	2014-05-31 21:01:30 +02:00
README.md	Added accidentally removed screenshots again to the readme	2014-07-28 21:21:28 +02:00
bower.json	Fixed #126 : lack of a semi colon at end of the bundled files	2014-08-28 21:20:14 +02:00
gulpfile.js	Fixed #126 : lack of a semi colon at end of the bundled files	2014-08-28 21:20:14 +02:00
jsoneditor.css	Added css concat and minify to gulpfile	2014-05-29 22:35:47 +02:00
jsoneditor.js	Fixed #126 : lack of a semi colon at end of the bundled files	2014-08-28 21:20:14 +02:00
jsoneditor.map	Fixed #126 : lack of a semi colon at end of the bundled files	2014-08-28 21:20:14 +02:00
jsoneditor.min.css	Fixed #111 : accept JavaScript objects as input, and turn them into valid JSON	2014-07-26 15:01:53 +02:00
jsoneditor.min.js	Fixed #126 : lack of a semi colon at end of the bundled files	2014-08-28 21:20:14 +02:00
package.json	Fixed #126 : lack of a semi colon at end of the bundled files	2014-08-28 21:20:14 +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 rel="stylesheet" type="text/css" href="jsoneditor/jsoneditor.min.css">
    <script type="text/javascript" src="jsoneditor/jsoneditor-min.js"></script>
</head>
<body>
    <div id="jsoneditor" style="width: 400px; height: 400px;"></div>

    <script type="text/javascript" >
        // 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.
To rebuild the assets (not necessary):
```
npm run build-assets
```
This will build Ace editor, and then generates necessary ace editor files in the folder ./asset/ace, and jsonlint in the folder ./asset/jsonlint.