jsoneditor: a browser JSON tree, code and text editor you embed in your own app

What jsoneditor solves, and who reaches for it

Editing JSON by hand in a textarea goes wrong in predictable ways. A trailing comma breaks the parse, a nested array is impossible to scan, and nobody notices the structural mistake until the payload hits an API. jsoneditor exists to put a structured view in front of that problem. The README describes it as "a web-based tool to view, edit, format, and validate JSON", with modes for a tree editor, a code editor and a plain text editor.

The important detail is that it is a component, not a product. The README states the editor "can be used as a component in your own web application", loadable as a CommonJS module, an AMD module, or a plain script tag. That makes the audience internal tools teams: an admin console that edits a feature-flag document, a config panel for a service, a support tool where someone pastes a customer's JSON payload and fixes a field. The library was originally built as the core of jsoneditoronline.org and was open sourced afterwards, so the same engine that runs a public site is available to embed.

Supported browsers are listed as Chrome, Firefox, Safari and Edge. There is no server-side story here and no Node runtime component; this is a browser library that happens to be distributed through npm.

Tree mode, code mode, preview mode: what each one actually does

The modes are not cosmetic skins over one editor, and the feature lists differ in ways that matter when you choose a default.

Tree mode is the structural one. The README lists changing, adding, moving, removing and duplicating fields and values, sorting arrays and objects, a color picker, search and highlight in the tree view, and undo and redo across all actions. It also supports transforming JSON with JMESPath queries. If your users think in terms of fields rather than text, this is the mode to open first.

Code mode and text mode overlap more than the naming suggests. Both format and compact JSON, both repair JSON, both validate against a JSON schema. Code mode adds colorized code and inspection "powered by Ace", which is the ace-builds dependency visible in package.json. Text mode is the plain fallback.

Preview mode is the outlier and the one worth reading twice. The README claims it handles large JSON documents up to 500 MiB, and it carries the same JMESPath transform, format, compact, repair and schema validation features as the other modes. A 500 MiB ceiling is a documented limit, not a guarantee about your machine: parsing and rendering a document that size in a browser tab will depend on available memory, and the README does not describe what happens when a document exceeds the limit.

Schema validation across tree, code, text and preview modes is "powered by ajv", pinned in package.json as ajv ^6.12.6. That is worth noting if your project already depends on a newer ajv major, because two copies of the validator will end up in the bundle.

Installing jsoneditor from npm and getting an editor on screen

The README recommends npm and gives the install command directly:

npm install jsoneditor

It also notes that you can use another JavaScript package manager such as yarn, or a CDN such as cdnjs or jsDelivr. The related search phrase jsoneditor cdn maps to that second path: if you are not bundling, you point a script tag at a CDN copy of jsoneditor.min.js instead.

The usage example in the README is a complete HTML page. It loads the stylesheet and script, creates a container div, then constructs the editor and sets an initial document:

<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>
<script>
  const container = document.getElementById("jsoneditor")
  const options = {}
  const editor = new JSONEditor(container, options)
  editor.set({ "Array": [1, 2, 3], "Boolean": true, "Null": null, "Number": 123 })
  const updatedJson = editor.get()
</script>

Two things to notice. First, the README warns that when using code mode you must specify charset utf-8 in the meta tag, because Ace needs it. Second, the README tells you to change the two dist URLs to wherever you actually downloaded the library, or to fill in your CDN URL; copying the snippet verbatim will 404 unless the dist folder sits at that path relative to your page. The container needs an explicit height, as in the example, or the editor has nothing to fill.

If you are building the library from source rather than consuming the package, the README gives npm install followed by npm run build, which generates jsoneditor.js, jsoneditor.css and minified versions in dist. npm start watches source files and updates the non-minified output only; the README states it will not update the minified versions because that is an expensive operation.

The successor question, and other limits you should weigh first

The most consequential line in the README is the pointer to svelte-jsoneditor, described as a successor. The README is explicit that the new editor "is not a one-to-one replacement, so there may be reasons to stick with jsoneditor", and it links to a differences page rather than summarizing them. That is an honest framing, but it also means anyone starting today is choosing between a library and its stated successor, and the README does not tell you which one gets new features. The repository's last push was on 2026-09-10 and it is not archived, so work is happening; the README simply does not promise where it goes.

The second limit is scope. This is a JSON editor. There is no YAML mode, no TOML mode, no CSV import, and nothing in the README about editing arbitrary text formats. If your config files are YAML, the tree editor is the wrong shape for the job and you will end up converting to JSON first, which loses comments and ordering.

The third is the dependency surface. package.json pulls in ace-builds, ajv, javascript-natural-sort, jmespath, json-source-map, jsonrepair, picomodal and vanilla-picker. You inherit all of them in your bundle whether or not you use code mode, JMESPath queries or the color picker. For a small internal tool that is usually acceptable. For a public-facing page where bundle size is a budget line, it is a real cost.

Finally, the 500 MiB preview figure is the only large-document claim in the README and it applies to preview mode alone. The README does not state what tree mode does with a document of that size.

How jsoneditor compares with Monaco and CodeMirror

The natural alternative is a general-purpose code editor such as Monaco or CodeMirror, wired up with JSON language support. The difference is the starting point. Monaco and CodeMirror give you a text buffer with syntax highlighting, autocomplete and diagnostics; a JSON tree, sorting, a color picker, drag-to-move fields and JMESPath queries are things you would build on top. jsoneditor gives you the tree first and the text buffer second, which is why its code mode is a mode rather than the whole product.

That trade runs both ways. With Monaco you control the editing model completely and you can extend it to YAML, TypeScript or anything else with a language service. With jsoneditor you get a fixed set of modes and a fixed feature list, and the README does not describe a plugin system for adding a fifth mode. The repository does ship 25 example files under examples/, covering custom fields, custom Ace configuration, custom validation (including async), custom query languages, templates, autocomplete in three levels of complexity, translation, and editor synchronization. Those examples are where the extension surface actually lives, and they are more informative than the README's feature bullets.

If your requirement is "let a support agent fix one field in a JSON payload", jsoneditor wins on effort. If your requirement is "give engineers a general editor for config files in several formats", a code editor plus a JSON language mode is the more honest foundation.

Maintenance, upgrades and the Apache-2.0 licence in practice

The package is published at version 10.4.3 with the Apache-2.0 licence, and the repository was last pushed on 2026-09-10. The README carries a maintenance badge pointing at the project's pulse page, which is a signal the author tracks, not a commitment about release cadence.

Upgrade cost is dominated by two things. First, ajv is pinned at ^6.12.6, an older major line; if schema validation behaviour changes between ajv majors, that change arrives with a jsoneditor bump, not on your schedule. Second, the build chain in devDependencies is modern and heavy (webpack 5, gulp 5, Babel 8, sass), but that only matters if you build from source. If you consume the npm package, you get the dist files and none of the build tooling.

The README does not document a rollback procedure, so treat the version you pin in package.json as your rollback mechanism, and read HISTORY.md before bumping. The repository also ships SECURITY.md and CONTRIBUTING.md, which is where vulnerability reporting and patch expectations are described rather than in the README.

On licensing: Apache-2.0 is permissive, and the repository includes both a LICENSE and a NOTICE file, which is the standard Apache arrangement. The README adds a non-legal note that commercial users are socially, though not legally, expected to help fund maintenance through GitHub Sponsors. That is a request, not a licence term. Whether the NOTICE file obliges you to reproduce attribution in your own distribution is a question for your own legal review, not something this article can settle.

Editorial conclusion

Adopt jsoneditor if you need an embeddable, dependency-light JSON component in a browser app and you are comfortable with a library whose README points to svelte-jsoneditor as its successor. Do not adopt it if you want a maintained-then-abandoned-later story with no migration path, or if you need an editor for files beyond the 500 MiB preview ceiling. Before writing any integration code, open the successor's differences page and the docs/api.md file, then decide which of the two you are actually building on. If you stay with jsoneditor, pin the version in package.json and read HISTORY.md before each bump, because the README does not describe a rollback procedure.

Frequently asked questions

Official sources

1. Issues
2. josdejong/jsoneditor on GitHub
3. License: Apache-2.0
4. README