jsoneditor README

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

JSON Editor

Version Downloads Maintenance License FOSSA Status

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.

LambdaTest

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

Code mode

Text mode

Preview mode

Documentation

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:

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.

jsoneditor (josdejong/jsoneditor)

Searching Database…

12.3K ·GitHub
Jsoneditor
Что это такое?Веб-инструмент, чтобы смотреть, редактировать, форматировать и проверять JSON прямо в браузере, а не возиться с сырым текстом.
Это отдельное приложение или библиотека, которую я встраиваю в своё веб-приложение?Это компонент для вашего веб-приложения, а не готовый сервис: подключается как модуль CommonJS, модуль AMD или обычный файл JavaScript.
Как добавить его на веб-страницу?Подключите на странице собранные файлы jsoneditor.min.js и jsoneditor.min.css из папки dist или укажите ссылки на копии с CDN.
Нужно ли мне отдельно подключать другие библиотеки?Ничего подключать самому не нужно: Ace (редактор кода), ajv (проверка по схеме) и jsonrepair идут в комплекте как npm-зависимости, так что двух собранных файлов достаточно.
Будет ли он работать в любом браузере?Он рассчитан на браузер: официально поддерживаются Chrome, Firefox, Safari и Edge.
Можно ли бесплатно использовать его в коммерческих проектах?Да, это бесплатный проект с открытым кодом под разрешительной лицензией Apache 2.0; коммерческие пользователи по негласной договорённости, а не по закону, могут поддержать его развитие финансово.
Какие режимы редактирования он предлагает?Три: редактор в виде дерева, где по структурированным данным можно кликать, редактор кода на основе Ace для работы с текстом и простой текстовый редактор.
Кроме редактирования, что ещё он умеет делать с моим JSON?Проверяет соответствие JSON Schema через встроенную ajv, чинит сломанный JSON с помощью jsonrepair и поддерживает запросы JMESPath через jmespath.
Откуда взялся этот проект?Он начинался как основной компонент популярного веб-приложения и был оттуда выложен в открытый доступ; репозиторий на GitHub ведёт историю с 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