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

Go to file

Adam Vigneaux f8279537d0 Fix Node._findSchema() (#651 ) * Add test setup function for simulating browser globals * Add tests for Node._findSchema Some of the tests currently fail, which will be helpful in fixing the incorrect behavior of the `_findSchema` function. The current failures are: - the last schema in the pattern properties object is always returned - when pattern properties are present, wrong object schemas are returned * Add schema-based tooltip to field names Using the `title` and `description` properties from the schema, create and set a tooltip on each field name. When the user hovers over a field name, it will show the applicable information: title, description, both, or neither, depending on what data is present in the schema. * Remove redundant setting of field name title * Remove accidental .only() from Node tests * Fix Node._findSchema for pattern properties The method now checks the key against the RegExp specified by the pattern properties instead of always returning the last pattern property in the object. * Fix path used for recursive calls in Node._findSchema * Add failing Node._findSchema tests for multi-level pattern properties * Fix Node._findSchema for schemas with properties and patternProperties		2019-02-16 14:01:30 +01:00
dist	Publish `v5.28.2`	2019-01-23 14:29:13 +01:00
docs	Update docs	2019-02-09 13:05:53 +01:00
examples	Define `onClassName` once and use it twice	2019-01-21 21:04:32 +01:00
misc	Publish v5.27.1	2019-01-16 15:59:11 +01:00
src	Fix Node._findSchema() (#651 )	2019-02-16 14:01:30 +01:00
test	Fix Node._findSchema() (#651 )	2019-02-16 14:01:30 +01:00
.gitignore	Add API functionality to extend event behaviour.	2018-07-02 13:13:02 +02:00
.npmignore	Don't package CONTRIBUTING.md or examples folder (#579 )	2018-09-18 19:53:57 +02:00
CONTRIBUTING.md	Fixed #244 : updated CONTRIBUTING file	2015-12-21 13:09:41 +01:00
HISTORY.md	Fix #657 : `onClassName` throwing an error when a node is removed	2019-02-14 20:42:23 +01:00
LICENSE	first commit	2012-04-21 13:28:28 +02:00
NOTICE	Publish v5.27.0	2019-01-05 15:21:54 +01:00
README.md	Publish v5.27.0	2019-01-05 15:21:54 +01:00
bower.json	Fixed #202 : removed `version` field from bower.json	2015-12-31 14:24:13 +01:00
gulpfile.js	Gulp4 (#608 )	2018-12-05 09:35:52 +01:00
index.js	Using brace to load Ace. Ace and jsonlint are now packed by default with JSONEditor. Removed all redundant build stuff for the assets.	2015-02-27 21:54:04 +01:00
package-lock.json	Fix Node._findSchema() (#651 )	2019-02-16 14:01:30 +01:00
package.json	Fix Node._findSchema() (#651 )	2019-02-16 14:01:30 +01:00

README.md

JSON Editor

JSON Editor is a web-based tool to view, edit, format, and validate 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, Edge, Internet Explorer 11.

json editor code editor

Cross browser testing for JSONEditor is generously provided by BrowserStack

Features

Tree editor

Change, add, move, remove, and duplicate fields and values.
Sort arrays and objects.
Transform JSON using JMESPath queries.
Colorized code.
Color picker.
Search & highlight text in the tree view.
Undo and redo all actions.
JSON schema validation (powered by ajv).

Code editor

Colorized code (powered by Ace).
Inspect JSON (powered by Ace).
Format and compact JSON.
Repair JSON.
JSON schema validation (powered by ajv).

Text editor

Format and compact JSON.
Repair JSON.
JSON schema validation (powered by ajv).

Documentation

Documentation:
- API
- Usage
- Shortcut keys
Examples
Source
History

Install

with npm (recommended):

npm install jsoneditor

with bower:

bower install jsoneditor

Note that to use JSONEditor in Internet Explorer 11, it is necessary to load a polyfill for Promise in your application.

Use

<!DOCTYPE HTML>
<html>
<head>
    <!-- when using the mode "code", it's important to specify charset utf-8 -->
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">

    <link href="jsoneditor/dist/jsoneditor.min.css" rel="stylesheet" type="text/css">
    <script src="jsoneditor/dist/jsoneditor.min.js"></script>
</head>
<body>
    <div id="jsoneditor" style="width: 400px; height: 400px;"></div>

    <script>
        // create the editor
        var container = document.getElementById("jsoneditor");
        var options = {};
        var editor = new JSONEditor(container, options);

        // 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 dist of the project.
To automatically build when a source file has changed:
```
npm run watch
```
This will update ./jsoneditor.js and ./jsoneditor.css in the dist folder on every change, but it will NOT update the minified versions as that's an expensive operation.

Custom builds

The source code of JSONEditor consists of CommonJS modules. JSONEditor can be bundled in a customized way using a module bundler like browserify or webpack. First, install all dependencies of jsoneditor:

npm install

To create a custom bundle of the source code using browserify:

browserify ./index.js -o ./jsoneditor.custom.js -s JSONEditor

The Ace editor, used in mode code, accounts for about one third of the total size of the library. To exclude the Ace editor from the bundle:

browserify ./index.js -o ./jsoneditor.custom.js -s JSONEditor -x brace -x brace/mode/json -x brace/ext/searchbox

To minify the generated bundle, use uglifyjs:

uglifyjs ./jsoneditor.custom.js -o ./jsoneditor.custom.min.js -m -c