c79bea4eb8
* Display schema defaults inline next to Nodes * Improve usability of schema default display - When value is default, make it bold and set a tooltip - When value is not default, display the default next to the value - When value is default and is a select, show "Default" next to it - Lighten the color of green used for values This increases the contrast between normal values and default values. * Remove styling when value is the same as the schema default This styling may have been confusing for some users and may not have been applicable to all situations. * Apply is-default and is-not-default classes to values This allows the user to supply custom styling for these states. To set styles for values that match the default value in the schema, use the class `.jsoneditor-is-default`. To set styles for values that _do not_ match the default value in the schema, use the class `.jsoneditor-is-not-default`. * Remove extra newline after schema examples in tooltip * Move schema default display from inline to tooltip This presents less opportunity for user confusion and is likely to be more widely applicable. * Add examples of schema metadata display * Add documentation on styling |
||
|---|---|---|
| dist | ||
| docs | ||
| examples | ||
| misc | ||
| src | ||
| test | ||
| .gitignore | ||
| .npmignore | ||
| CONTRIBUTING.md | ||
| HISTORY.md | ||
| LICENSE | ||
| NOTICE | ||
| README.md | ||
| bower.json | ||
| gulpfile.js | ||
| index.js | ||
| package-lock.json | ||
| package.json | ||
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.
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
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
Promisein 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 buildThis 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 watchThis will update
./jsoneditor.jsand./jsoneditor.cssin 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