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

Go to file

Yaniv Efraim d99d899648 Feature #144 change regex to match newlines as well		2015-02-11 21:50:17 +02:00
asset	Added all ace dependencies to ./asset/ace	2014-05-31 20:42:35 +02:00
docs	Fixed #154 : Implemented shortcut keys to format and compact JSON when in mode `text` or `code`.	2015-01-23 10:39:12 +01: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	Feature #144 change regex to match newlines as well	2015-02-11 21:50:17 +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	Fixed #163 : updated npm dependencies	2015-02-10 22:14:45 +01:00
.npmignore	Fixed #163 : updated npm dependencies	2015-02-10 22:14:45 +01:00
CONTRIBUTING.md	Added a CONTRIBUTING.md file	2015-02-10 21:41:47 +01:00
HISTORY.md	Released version 3.2.0	2015-01-25 15:11:56 +01: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	file name is jsoneditor.min.js	2014-12-21 18:34:58 +00:00
bower.json	Released version 3.2.0	2015-01-25 15:11:56 +01:00
gulpfile.js	Fixed #163 : updated npm dependencies	2015-02-10 22:14:45 +01:00
jsoneditor.css	Fixed #154 : Implemented shortcut keys to format and compact JSON when in mode `text` or `code`.	2015-01-23 10:39:12 +01:00
jsoneditor.js	Feature #144 change regex to match newlines as well	2015-02-11 21:50:17 +02:00
jsoneditor.map	Feature #144 change regex to match newlines as well	2015-02-11 21:50:17 +02:00
jsoneditor.min.css	Fixed #154 : Implemented shortcut keys to format and compact JSON when in mode `text` or `code`.	2015-01-23 10:39:12 +01:00
jsoneditor.min.js	Feature #144 change regex to match newlines as well	2015-02-11 21:50:17 +02:00
package.json	Fixed #163 : updated npm dependencies	2015-02-10 22:14:45 +01: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.