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

Go to file

josdejong 01f6112261 Fixed a security error in the server side file retriever script of the web app.		2013-07-31 21:42:09 +02:00
app	Fixed a security error in the server side file retriever script of the web app.	2013-07-31 21:42:09 +02:00
docs	Updated version number to 2.3.0-SNAPSHOT. Updated readme and docs	2013-05-04 13:17:24 +02:00
examples	Added an example showing mode switching	2013-05-04 11:34:02 +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
jsoneditor	Fixed #58 : css not being loaded in case of AMD and multiple scripts	2013-07-30 22:13:26 +02:00
lib	Changed color of booleans from orange to darkorange	2013-07-08 20:30:14 +02:00
misc	Docs and readme updated	2013-03-08 22:29:26 +01:00
test	Improved splitter: can now completely hide the panels. Added highlighting of the splitter.	2013-03-07 22:35:06 +01:00
tools	Created ant build script to generate zip files and build site	2012-08-16 22:25:18 +02:00
.gitignore	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
.npmignore	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
HISTORY.md	Fixed a security error in the server side file retriever script of the web app.	2013-07-31 21:42:09 +02:00
Jakefile.js	Released version 2.2.0	2013-05-04 12:42:54 +02:00
LICENSE	first commit	2012-04-21 13:28:28 +02:00
NOTICE	Splitted jsoneditor.js and jsoneditor.css into multiple source files. Rearranged the folders a little, and updated the build script.	2013-01-01 20:54:07 +01:00
README.md	Fixed a typo in the readme	2013-06-03 13:01:52 +02:00
bower.json	Fixed a security error in the server side file retriever script of the web app.	2013-07-31 21:42:09 +02:00
jsoneditor-min.css	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
jsoneditor-min.js	Fixed #58 : css not being loaded in case of AMD and multiple scripts	2013-07-30 22:13:26 +02:00
jsoneditor.css	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
jsoneditor.js	Fixed #58 : css not being loaded in case of AMD and multiple scripts	2013-07-30 22:13:26 +02:00
package.json	Fixed a security error in the server side file retriever script of the web app.	2013-07-31 21:42:09 +02:00

README.md

JSON Editor Online

http://jsoneditoronline.org/

Description

JSON Editor Online 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.

Screenshot

The web application shows two panels side by side: a code editor on the left, and a tree editor on the right. Files and urls can be loaded via the main menu.

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

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.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 jsoneditor. The code for the web application in app/web. To build the library from sourcecode, run

jake

in the root of the project. This will generate the files jsoneditor.js, jsoneditor.css, and minified versions, and will create a folder build containing the zipped library and the built web application.