Repolode
Submit
josdejong

josdejong/jsoneditor

A web-based JSON viewer and editor component with tree, code, text, and preview modes, usable inside your own web app.

View on GitHub
Stars
12,267
Forks
2,073
Open issues
256
Last commit
7 days ago

What is it?

JSON Editor lets you view, edit, format, and validate JSON in the browser. It offers several modes: a tree editor for changing fields and values visually, a code editor with syntax highlighting, a plain text editor, and a preview mode for large documents up to 500 MiB.

The tree mode supports adding, moving, duplicating, and sorting nodes, JMESPath-based transforms, search, and undo/redo. Across modes it provides JSON schema validation powered by ajv, plus formatting, compacting, and repair of malformed JSON.

The editor is distributed as a library that can be embedded in your own web application. It loads as a CommonJS module, an AMD module, or a plain script, and is installable via npm or a CDN.

Key features

  • 01Tree mode for editing, moving, duplicating, and sorting fields and values.
  • 02Code mode with syntax highlighting, formatting, and compacting.
  • 03Preview mode for handling JSON documents up to 500 MiB.
  • 04JSON schema validation using ajv in every mode.
  • 05JMESPath queries to transform JSON data.
  • 06Repair of malformed JSON.

Use cases

  • Embedding a JSON editor in a web admin panel or configuration tool.
  • Inspecting and fixing API responses or config files in the browser.
  • Validating JSON against a schema before saving user-submitted data.
  • Viewing large JSON files with the preview mode.

Quick start

  1. 1

    Install the library with npm

    npm install jsoneditor
  2. 2

    Include the CSS and JS files in your HTML page and create an editor in a container element

Things to know

  • The README notes that svelte-jsoneditor is the successor, and the new editor is not a one-to-one replacement.

Topics

#json#editor#json-schema#web-component#tree-view#validation

FAQ

What is jsoneditor?
A web-based JSON viewer and editor component with tree, code, text, and preview modes, usable inside your own web app. JSON Editor lets you view, edit, format, and validate JSON in the browser. It offers several modes: a tree editor for changing fields and values visually, a code editor with syntax highlighting, a plain text editor, and a preview mode for large documents up to 500 MiB.
Is jsoneditor free to use? What license does it have?
jsoneditor is open source under the Apache-2.0 license. Check the license terms before using it in commercial products.
Is jsoneditor still maintained?
Actively maintained. The last commit to jsoneditor was on Nov 1, 2026.
What can I use jsoneditor for?
Embedding a JSON editor in a web admin panel or configuration tool. Inspecting and fixing API responses or config files in the browser. Validating JSON against a schema before saving user-submitted data. Viewing large JSON files with the preview mode.
How do I install jsoneditor?
Install the library with npm: npm install jsoneditor Include the CSS and JS files in your HTML page and create an editor in a container element
Where can I get jsoneditor?
The source code and installation instructions are on GitHub: https://github.com/josdejong/jsoneditor

Summary generated by AI from the project's README. GitHub stats refresh daily.

Related projects