jsoneditor

What is jsoneditor?

The jsoneditor npm package is a web-based tool to view, edit, format, and validate JSON data. It provides a variety of features to manipulate JSON data in a user-friendly way, including a tree view, code view, and text view.

What are jsoneditor's main functionalities?

Tree View

The tree view allows users to view and edit JSON data in a structured, hierarchical format. This is useful for navigating complex JSON objects.

const JSONEditor = require('jsoneditor');
const container = document.getElementById('jsoneditor');
const options = { mode: 'tree' };
const editor = new JSONEditor(container, options);
const json = { 'array': [1, 2, 3], 'boolean': true, 'null': null, 'number': 123, 'object': { 'a': 'b', 'c': 'd' }, 'string': 'Hello World' };
editor.set(json);

Code View

The code view allows users to view and edit JSON data as raw text. This is useful for users who prefer to work directly with JSON code.

const JSONEditor = require('jsoneditor');
const container = document.getElementById('jsoneditor');
const options = { mode: 'code' };
const editor = new JSONEditor(container, options);
const json = { 'array': [1, 2, 3], 'boolean': true, 'null': null, 'number': 123, 'object': { 'a': 'b', 'c': 'd' }, 'string': 'Hello World' };
editor.set(json);

Text View

The text view allows users to view and edit JSON data as plain text. This is useful for quick edits and for users who are comfortable with text-based interfaces.

const JSONEditor = require('jsoneditor');
const container = document.getElementById('jsoneditor');
const options = { mode: 'text' };
const editor = new JSONEditor(container, options);
const json = { 'array': [1, 2, 3], 'boolean': true, 'null': null, 'number': 123, 'object': { 'a': 'b', 'c': 'd' }, 'string': 'Hello World' };
editor.set(json);

Validation

The validation feature allows users to define custom validation rules for their JSON data. This is useful for ensuring that JSON data meets specific requirements before it is used.

const JSONEditor = require('jsoneditor');
const container = document.getElementById('jsoneditor');
const options = { mode: 'code', onValidate: (json) => { const errors = []; if (!json.hasOwnProperty('requiredField')) { errors.push({ path: ['requiredField'], message: 'Field is required' }); } return errors; } };
const editor = new JSONEditor(container, options);
const json = { 'array': [1, 2, 3], 'boolean': true, 'null': null, 'number': 123, 'object': { 'a': 'b', 'c': 'd' }, 'string': 'Hello World' };
editor.set(json);

Other packages similar to jsoneditor

jsoneditor-react

jsoneditor-react is a React component for the jsoneditor package. It provides similar functionalities as jsoneditor but is designed to be used within React applications. It offers a seamless integration with React's component-based architecture.

react-json-view

react-json-view is another React component for viewing and editing JSON data. It provides a tree view similar to jsoneditor but is specifically designed for React applications. It also offers features like collapsing and expanding nodes, and editing values inline.

README

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

• Docs
• Examples
• Source
• History

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>

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.