JSON Editor Online is a web-based tool to view, edit, and format JSON. It shows your data side by side in a clear, editable treeview and in a code editor.

Screenshot

Features

View and edit JSON side by side in a treeview and a code editor.
Edit, add, move, remove, and duplicate fields and values.
Change type of values.
Sort arrays and objects.
Colorized values, color depends of the value type.
Search & highlight text in the treeview.
Undo and redo all actions.
Load and save files and urls.
Format, compact, and inspect JSON in the code editor powered by Ace.
Library can be loaded as CommonJS module, AMD module, or as a regular javascript file.

Install

with npm:

npm install jsoneditor

with bower:

npm install bower

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>

Documentation

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.

FAQs

What is bee_api?

Is bee_api well maintained?

Package last updated on 21 May 2013

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install