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

https://github.com/josdejong/jsoneditor http://jsoneditoronline.org/

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.

Screenshots

Tree editor

Code editor

Documentation

• Documentation:
  • API
  • Usage
• 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.