jsoneditor README

The project's README from github.com/josdejong/jsoneditor. As one markdown file: README.md.

JSON Editor

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, Edge.

json editor code editor

Continuous integration tests are run on GitHub Actions, and LambdaTest is used to test on all major browsers.

Thanks, GitHub Actions and LambdaTest for the generous support for this open source project!

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.

Features

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

Documentation

Documentation:
- API
- Usage
- Shortcut keys
Examples
Source
History

Install

with npm (recommended):

npm install jsoneditor

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

Use

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.

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

    <script>
        // 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"
        }
        editor.set(initialJson)

        // get json
        const updatedJson = editor.get()
    </script>
</body>
</html>

Build

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.

Test

Run unit tests:

npm test

Run code linting (JavaScript Standard Style):

npm run lint

License

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.

Searching Database…

12.3K ·GitHub

What is this?

A web-based tool to view, edit, format, and validate JSON right in the browser, instead of wrangling raw text.

Is this a standalone app, or a library I embed in my own web application?

It's a component for your own web application, not a hosted app: load it as a CommonJS module, an AMD module, or a plain JavaScript file.

How do I add it to a web page?

Add the built jsoneditor.min.js and jsoneditor.min.css from the dist folder to your page, or point the URLs at a CDN copy.

Do I need to wire up other libraries alongside it?

Nothing to wire up yourself: Ace (code editor), ajv (schema validation), and jsonrepair are bundled as npm dependencies, so the two built files are enough.

Will it work in every browser I throw at it?

It targets the browser: Chrome, Firefox, Safari, and Edge are the officially supported browsers.

Is it free to use in commercial projects?

Free and open source under the permissive Apache 2.0 license; commercial users have a social, not legal, expectation to help fund maintenance.

What editing modes does it offer?

Three: a tree editor for clicking through structured data, a code editor built on Ace for text editing, and a plain text editor.

Besides editing, what else can it do with my JSON?

It validates against JSON Schema via the bundled ajv, can repair broken JSON through jsonrepair, and supports JMESPath queries via jmespath.

Where did the project come from?

It started as the core component of a popular web application and was open sourced from there; the GitHub repo dates back to 2012.

What are similar projects?

ace, editor.md, codemirror5, twinkleplop, monaco-editor, trix, validator.js, editor.js

Which topics is it in?

commonjs, watch, code-editor, validation, amd, syntax-highlighting, editor, javascript-library, json, browser, web-app, web-development

Creator: josdejong
Size: 62.3 MB
Stars: 12.3K
Updated: CommitJul 30
Age: 14y
Commits · 90 Days