A schema-aware JSON Editor developed with Vue.js

json-editor

A schema-aware editor for JSON document. It provides a tree view to present the structure of a JSON document, the user can manipulate the JSON from the context menu. There is a text view to present the content of the JSON document and user may edit JSON within it. Developed with Vue.js.

Live demo of source code.

Overview

The Editor is using JSON element as the building block of JSON document. The JSON element can be a string, integer, number, boolean, object or array, which may have name and value. JSON document is a tree of JSON elements.

The user can edit the JSON document by composing the tree of JSON elements and setting the name or value of these elements.

JSON Editor is schema-aware, which means it would provide a hint to build valid JSON document from the schema, and it would validate the JSON document after every update.

Because JSON schema itself is a JSON document, the JSON Editor could also edit JSON schema with meta-schema of JSON schema and the editor contains some specific logic to support schema editing.

For details regarding JSON schema, you may reference Understanding JSON Schema, which is a great guide about JSON schema.

The editor has four parts:

  1. Pallet of user schemas
  2. Tree View of JSON document
  3. Context Menu
  4. Text View of JSON document

Make sure to read the guide for more information.

Features

Pallet of user schemas

List of all user schemas, the user can select one of them as the current schema of JSON document and save or update the custom schema, load custom schema for editing, and delete custom schema.

Tree View of JSON document

The structure of JSON document could expend or collapse at any level.

Context Menu

Right-click on the element in tree view could bring out the context menu for that element, and perform actions specific for that element.

Text View of JSON document

A text view to display content of schema. The user could also edit the document directly in the text view.

Schema validation

The JSON document would validate with currently selected schema after every update.

Undo/Redo

Undo and Redo could keep track of every update of JSON document.

Copy JSON document to system clipboard.

Download JSON document as a JSON file.

Load JSON document from a JSON schema file.

The project's code is available on GitHub under a GNU General Public License v3.0.