josdejong/jsoneditor

JSON Editor is a JavaScript library that adds an interactive editor for JSON data to a web page. JSON is a text format used to store and transfer structured data between programs, it looks like nested lists and key-value pairs. This library gives you a visual interface for reading and editing that format without needing to manually type or parse raw text. The library offers four different ways to view and edit JSON. Tree mode lets you browse and modify the structure visually, with colored fields, undo and redo support, search, and the ability to sort or query the data. Code mode shows the raw JSON with syntax coloring and lets you format or compact it. Text mode is a simpler version of code mode. Preview mode is designed for very large files, up to 500 megabytes, where full editing would be too slow. All four modes include a validation feature that checks whether the JSON conforms to a schema, meaning a defined ruleset that specifies what fields are expected and what types they should be. This is useful if you are working with data that must match a particular format before being sent to a server or saved. The library can be embedded in your own web application using npm (a standard tool for installing JavaScript packages) or loaded directly from a CDN link in an HTML file. A short code example in the README shows how to create an editor on a page, load some initial data into it, and read the modified data back out. The README notes that this library has a newer successor called svelte-jsoneditor, which is not a direct drop-in replacement but offers a more modern implementation. The original library remains maintained and usable. It was originally built as the core of the JSON Editor Online web app. The license is Apache 2.0.