josdejong/jsoneditor

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

Summary

JSONEditor is a JavaScript library that provides a web-based tool to view, edit, format, and validate JSON. It ships with multiple editing modes (tree, code, text, and preview) and can be embedded as a component in a web application. The README notes it has a successor called svelte-jsoneditor, so the documented differences page is worth reviewing before starting a new project.

What it is useful for

JSONEditor is useful when a web app needs a built-in JSON editing surface, such as an admin panel, a configuration editor, or an API response inspector. Each mode targets a different workflow, and the README lists the following capabilities:

• Tree mode supports change, add, move, remove, and duplicate operations on fields and values, sorting of arrays and objects, search and highlight, undo/redo, a color picker, JMESPath query transformations, and JSON schema validation via ajv.
• Code mode provides Ace-based syntax highlighting, JSON inspection, format and compact, repair, and schema validation.
• Text mode offers format and compact, repair, and schema validation.
• Preview mode is aimed at large payloads and is documented to handle documents up to 500 MiB, with format and compact, repair, JMESPath, and schema validation.

The library is JavaScript-only and the README lists supported browsers as Chrome, Firefox, Safari, and Edge, which is the main documented platform constraint. It can be loaded as a CommonJS module, AMD module, or as a regular script.

How engineers can use it

The README documents two paths. The npm install is npm install jsoneditor, and the package ships CSS and JS files in jsoneditor/dist/. The simplest documented usage loads the assets via script tags, creates a container element, and instantiates new JSONEditor(container, options). Data is set with editor.set(json) and read with editor.get(). The same example shows loading the library from a CDN such as cdnjs or jsdelivr.

For working on the library itself, the documented build steps are npm install followed by npm run build to produce jsoneditor.js, jsoneditor.css, and their minified versions in the dist folder, or npm start to rebuild on file change (non-minified only, per the README). Tests run via npm test, and linting uses Standard Style via npm run lint. The license is Apache-2.0, and the README adds a non-legal note that commercial users are socially expected to sponsor maintenance.