A web-based tool to view, edit, format, and validate JSON
Alternatives To Jsoneditor
Project NameStarsDownloadsRepos Using ThisPackages Using ThisMost Recent CommitTotal ReleasesLatest ReleaseOpen IssuesLicenseLanguage
Editor.js24,33937231a day ago72July 20, 2023534apache-2.0TypeScript
A block-style editor with clean JSON output
Jsoneditor10,58638337910 hours ago201May 15, 2023221apache-2.0JavaScript
A web-based tool to view, edit, format, and validate JSON
Json Editor5,376141365 years ago19August 07, 2016461mitJavaScript
JSON Schema Based Editor
Json Editor3,875111614 days ago34August 16, 2022190mitJavaScript
JSON Schema Based Editor
Kityminder Editor2,967210 days ago11February 14, 2019640gpl-2.0JavaScript
Powerful Mindmap Editing Tool
Json Splora1,76627 years ago11December 13, 201618mitJavaScript
GUI for editing, visualizing, and manipulating JSON data
12 days agomitJavaScript
CrossUI is a free Cross-Browser Javascript framework with cutting-edge functionality for rich web application
Svelte Jsoneditor5761311 hours ago26November 17, 202227otherTypeScript
A web-based tool to view, edit, format, repair, query, transform, and validate JSON
5 years ago1June 03, 20209mitJavaScript
User friendly, visual JSON editor built as an Angular 1 directive.
5 years ago5May 21, 201818otherJavaScript
JSON editor jQuery plugin
Alternatives To Jsoneditor
Select To Compare

Alternative Project Comparisons

JSON Editor

Version Downloads Maintenance License FOSSA Status

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, Opera, Edge, Internet Explorer 11.

json editor   code editor

Cross browser testing for JSONEditor is generously provided by BrowserStack


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.


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).



with npm (recommended):

npm install jsoneditor

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

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.js and jsoneditor/dist/jsoneditor.min.css to match the place where you've downloaded the library, or fill in the URL of the CDN you're using.

<html lang="en">
    <!-- 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>
    <div id="jsoneditor" style="width: 400px; height: 400px;"></div>

        // 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"

        // get json
        const updatedJson = editor.get()


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

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


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.

Popular Json Projects
Popular Editor Projects
Popular Data Formats Categories
Related Searches

Get A Weekly Email With Trending Projects For These Categories
No Spam. Unsubscribe easily at any time.