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

Go to file

josdejong 0915c8366c Fixed buggy loading of files in the web application		2013-09-12 21:48:47 +02:00
app	Fixed buggy loading of files in the web application	2013-09-12 21:48:47 +02:00
docs	Implemented option modes	2013-08-27 22:50:20 +02:00
examples	Implemented option modes	2013-08-27 22:50:20 +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 wrong title on fields with value null	2013-08-28 20:24:12 +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 buggy loading of files in the web application	2013-09-12 21:48:47 +02:00
Jakefile.js	Fixed buggy loading of files in the web application	2013-09-12 21:48:47 +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	Updated version number to 2.3.0-SNAPSHOT	2013-08-01 21:11:58 +02:00
jsoneditor-min.css	Restore focus after switching mode. Fixed z-index issue with context menu.	2013-08-28 15:01:05 +02:00
jsoneditor-min.js	Fixed buggy loading of files in the web application	2013-09-12 21:48:47 +02:00
jsoneditor.css	Restore focus after switching mode. Fixed z-index issue with context menu.	2013-08-28 15:01:05 +02:00
jsoneditor.js	Fixed buggy loading of files in the web application	2013-09-12 21:48:47 +02:00
package.json	Updated version number to 2.3.0-SNAPSHOT	2013-08-01 21:11:58 +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.