jsoneditor
Advanced tools
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.
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);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 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.
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. It can be loaded as CommonJS module, AMD module, or as a regular javascript file.
The library was originally developed as core component of the popular web application https://jsoneditoronline.org and has been open sourced since then.
Supported browsers: Chrome, Firefox, Safari, Edge.
Cross browser testing for JSONEditor is generously provided by BrowserStack
This library jsoneditor has a successor: svelte-jsoneditor. The new editor is not a one-to-one replacement, so there may be reasons to stick with jsoneditor.
The main differences between the two are described here.
JSONEditor has various modes, with the following features.
with npm (recommended):
npm install jsoneditor
Alternatively, you can use another JavaScript package manager like https://yarnpkg.com/, or a CDN such as https://cdnjs.com/ or https://www.jsdelivr.com/.
Note that in the following example, you'll have to change the urls
jsoneditor/dist/jsoneditor.min.jsandjsoneditor/dist/jsoneditor.min.cssto match the place where you've downloaded the library, or fill in the URL of the CDN you're using.
<!DOCTYPE HTML>
<html lang="en">
<head>
<!-- when using the mode "code", it's important to specify charset utf-8 -->
<meta 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
const container = document.getElementById("jsoneditor")
const options = {}
const editor = new JSONEditor(container, options)
// set json
const initialJson = {
"Array": [1, 2, 3],
"Boolean": true,
"Null": null,
"Number": 123,
"Object": {"a": "b", "c": "d"},
"String": "Hello World"
}
editor.set(initialJson)
// get json
const updatedJson = editor.get()
</script>
</body>
</html>
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 start
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.
Run unit tests:
npm test
Run code linting (JavaScript Standard Style):
npm run lint
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
jsoneditor is released as open source under the permissive the Apache 2.0 license.
If you are using jsoneditor commercially, there is a social (but no legal) expectation that you help fund its maintenance. Start here.
2024-06-19, version 10.1.0
ace and jsonrepairFAQs
A web-based tool to view, edit, format, and validate JSON
The npm package jsoneditor receives a total of 34,527 weekly downloads. As such, jsoneditor popularity was classified as popular.
We found that jsoneditor demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
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.
Security News
Node.js will be enforcing stricter semver-major PR policies a month before major releases to enhance stability and ensure reliable release candidates.
Security News
Research
Socket's threat research team has detected five malicious npm packages targeting Roblox developers, deploying malware to steal credentials and personal data.
Security News
vlt introduced its new package manager and a serverless registry this week, innovating in a space where npm has stagnated.