Overview

JSON Schema Editor using schema element as building block of JSON schema. The schema element is an object or array in JSON schema, which may have properties or items. JSON schema is a tree of schema elements.

User could edit the schema by composing the tree of schema elements, and setting the properties or items of these elements.

For detail of JSON schema, you may reference the Understanding JSON Schema, which is a great guide about JSON schema.

The editor has six parts:
  1. Pallet of schema elements
  2. Pallet of user schemas
  3. Tree View of schema
  4. Context Menu
  5. Property Inspector of schema element
  6. Text View of schema

Pallet of schema elements

List of all schema elements, user could drag & drop them to Tree View of schema to compose the schema.

Pallet of user schemas

List of all user defined schemas, they are pre-defined tree of schema elements, user could drag & drop them to Tree View of schema to compose the schema or load them into Tree View to edit them.

User could save current schema as new user defined schema. The title of schema will display as name, and description of schema will display as tooltip in the pallet.

User could import schema from local file. A dialog would show up, then user select the files to import, and selected files would import into Pallet of user schemas.

Tree View of schema

Tree View of schema presents a tree of schema elements, which could expend or collapse at any level. User could compose the tree by drag & drop elements from pallet or by using the "append" action of context menu. While doing drag & drop, element could put into only proper place in tree.

Context Menu

Right-click on the element in Tree View could bring up the Context Menu, which contains actions for that element. The general actions are "Remove", "Move up" and "Move down". If the element could have an editable name, then there would be a "Rename" action. The most useful action is "Append", which could select available child elements of selected element then append them. There are few actions for specific element to set specific property easily.

Property Inspector of schema element

Property Inspector of schema element presents available properties or items of selected element in Tree View. User could update these properties or select items.

For optional properties, there is a checkbox at right side of each property, and value could be updated only if the checkbox is checked.

Some properties would be validated before update, for example, the integer property must be valid integer number, if input value is invalid, an error message would show up and "UPDATE" button would be disabled.

For items, there is a checkbox at left side of each item, check the checkbox to select the value.

The ref element

The property of ref element is uri of referenced schema, user could input any value in the Property Inspector.

JSON Schema Editor use a special uri scheme "repository" to present reference to user schema in repository. For example, the uri for reference of schema "person" would be repository://person.

The Context Menu of ref element also contains an action to set reference to user schema in the repository. User could select the referenced schema directly.

The enum element

The Property Inspector of enum element is quite special, user could input value of various type. The value must input with JSON format, and the value must compliant with type of enum element. If input value is not valid, an error message would show up.

The value input by user would be add to the "enum items" list, and user could select them with checkbox at left side of each item.

Text View of schema

Text View of schema presents the content of schema, its read only, and user can't modify it directly.

New Schema

Press the "NEW SCHEMA" button would clear the content of schema.

Undo/Redo

The editor would keep track for every update of schema, user can rollback or resume updates of schema by press the "UNDO"/"REDO" button. The tracking of updates would be dropped after "NEW SCHEMA" or "LOAD SCHEMA" operation.

Copy schema to clipboard

Press the "COPY TO CLIPBOARD" button would copy the content of schema to system clipboard.

Download schema to clipboard

Press the "DOWNLOAD TO FILE" button would download the content of schema as a JSON file.

Load schema from file

Press the "LOAD FROM FILE" button would show up a dialog, user could select the file to load the content of schema.