Gathering detailed insights and metrics for jsoneditor
Gathering detailed insights and metrics for jsoneditor
A web-based tool to view, edit, format, and validate JSON
Installations
npm install jsoneditorDeveloper Guide
BETA
Typescript
No
Module System
CommonJS
Node Version
23.9.0
NPM Version
11.1.0
Releases
Unable to fetch releases
Languages
3
JavaScript
SCSS
HTML
JavaScript (87.62%)
SCSS (6.75%)
HTML (5.63%)
Developer
josdejong
Download Statistics
Total Downloads
38,450,175
Last Day
33,072
Last Week
192,915
Last Month
845,499
Last Year
9,299,654
GitHub Statistics
Apache-2.0 License
11,975 Stars
1,815 Commits
2,068 Forks
227 Watchers
5 Branches
86 Contributors
Updated on Jul 18, 2025
Maintainers
1
Package Meta Information
Latest Version
10.2.0
Package Id
jsoneditor@10.2.0
Unpacked Size
7.72 MB
Size
1.92 MB
File Count
128
NPM Version
11.1.0
Node Version
23.9.0
Published on
Mar 28, 2025
Total Downloads
Cumulative downloads
Total Downloads
38,450,175
Last Day
32.7%
33,072
Compared to previous day
Last Week
3.2%
192,915
Compared to previous week
Last Month
-1.6%
845,499
Compared to previous month
Last Year
15.2%
9,299,654
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
8
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. 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.
Continuous integration tests are run on GitHub Actions, and LambdaTest is used to test on all major browsers.
Thanks, GitHub Actions and LambdaTest for the generous support for this open source project!
Successor: svelte-jsoneditor
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.
Features
JSONEditor has various modes, with the following features.
Tree mode
- 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 mode
- Colorized code (powered by Ace).
- Inspect JSON (powered by Ace).
- Format and compact JSON.
- Repair JSON.
- JSON schema validation (powered by ajv).
Text mode
- Format and compact JSON.
- Repair JSON.
- JSON schema validation (powered by ajv).
Preview mode
- Handle large JSON documents up to 500 MiB.
- Transform JSON using JMESPath queries.
- Format and compact JSON.
- Repair JSON.
- JSON schema validation (powered by ajv).
Documentation
Install
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/.
Use
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.
1<!DOCTYPE HTML> 2<html lang="en"> 3<head> 4 <!-- when using the mode "code", it's important to specify charset utf-8 --> 5 <meta charset="utf-8"> 6 7 <link href="jsoneditor/dist/jsoneditor.min.css" rel="stylesheet" type="text/css"> 8 <script src="jsoneditor/dist/jsoneditor.min.js"></script> 9</head> 10<body> 11 <div id="jsoneditor" style="width: 400px; height: 400px;"></div> 12 13 <script> 14 // create the editor 15 const container = document.getElementById("jsoneditor") 16 const options = {} 17 const editor = new JSONEditor(container, options) 18 19 // set json 20 const initialJson = { 21 "Array": [1, 2, 3], 22 "Boolean": true, 23 "Null": null, 24 "Number": 123, 25 "Object": {"a": "b", "c": "d"}, 26 "String": "Hello World" 27 } 28 editor.set(initialJson) 29 30 // get json 31 const updatedJson = editor.get() 32 </script> 33</body> 34</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 startThis 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.
Test
Run unit tests:
npm test
Run code linting (JavaScript Standard Style):
npm run lint
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
License
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.
Moderate
5.3/10
Summary
Regular Expression Denial of Service in jsoneditor
Affected Versions
< 9.5.6
Patched Versions
9.5.6
Moderate
6.1/10
Summary
Cross-site Scripting in jsoneditor
Affected Versions
< 9.0.2
Patched Versions
9.0.2
Reason
security policy file detected
Details
- Info: security policy file detected: SECURITY.md:1
- Info: Found linked content: SECURITY.md:1
- Info: Found disclosure, vulnerability, and/or timelines in security policy: SECURITY.md:1
- Info: Found text in security policy: SECURITY.md:1
Reason
no dangerous workflow patterns detected
Reason
no binaries found in the repo
Reason
license file detected
Details
- Info: project has a license file: LICENSE:0
- Info: FSF or OSI recognized license: Apache License 2.0: LICENSE:0
Reason
5 commit(s) and 6 issue activity found in the last 90 days -- score normalized to 9
Reason
7 existing vulnerabilities detected
Details
- Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw
- Warn: Project is vulnerable to: GHSA-rp65-9cf3-cjxr
- Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j
- Warn: Project is vulnerable to: GHSA-4v9v-hfq4-rm2v
- Warn: Project is vulnerable to: GHSA-9jgg-88mc-972h
- Warn: Project is vulnerable to: GHSA-76c9-3jph-rj3q
- Warn: Project is vulnerable to: GHSA-v4rh-8p82-6h5w
Reason
Found 3/21 approved changesets -- score normalized to 1
Reason
dependency not pinned by hash detected -- score normalized to 1
Details
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/build.yaml:15: update your workflow using https://app.stepsecurity.io/secureworkflow/josdejong/jsoneditor/build.yaml/develop?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/build.yaml:17: update your workflow using https://app.stepsecurity.io/secureworkflow/josdejong/jsoneditor/build.yaml/develop?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/build.yaml:29: update your workflow using https://app.stepsecurity.io/secureworkflow/josdejong/jsoneditor/build.yaml/develop?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/build.yaml:30: update your workflow using https://app.stepsecurity.io/secureworkflow/josdejong/jsoneditor/build.yaml/develop?enable=pin
- Warn: npmCommand not pinned by hash: .github/workflows/build.yaml:21
- Info: 0 out of 4 GitHub-owned GitHubAction dependencies pinned
- Info: 1 out of 2 npmCommand dependencies pinned
Reason
detected GitHub workflow tokens with excessive permissions
Details
- Warn: no topLevel permission defined: .github/workflows/build.yaml:1
- Info: no jobLevel write permissions found
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
- Warn: 0 commits out of 12 are checked with a SAST tool
Score
4.9
/10
Last Scanned on 2025-07-14
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More