JSON Schema Editor With Vue.js 2 and Firebase

An intuitive editor for JSON schema which provides a tree view to present structure of schema and a property inspector to edit the properties of schema element. Develop with Vue.js 2 and Firebase.


  • Pallet of schema elements: List of all elements of JSON schema, could drag and drop to tree view.
  • Pallet of user schemas: List of all user schemas, which are stored in Firebase. User could save, load, delete and import schemas, schema could drag and drop to tree view.
  • Tree View of schema elements: The structure of schema, 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.
  • Property Inspector of schema elements: A panel to edit properties of schema element.
  • Text View of schema: A text view to display content of schema.
  • Drag and Drop: The element of JSON schema could drag and drop from pallet to tree view or within tree view.
  • Undo/Redo: Undo and Redo could keep track of every update of schema.
  • Schema Repository: User could save/load schemas to/from Firebase repository, import schema from file.


JSON Schema Editor

Download Details:

Author: tangram-js

Live Demo: https://json-schema-editor.tangramjs.com/

Download Link: https://github.com/tangram-js/json-schema-editor/archive/master.zip

Official Website: https://github.com/tangram-js/json-schema-editor

Install & Download:

$ npm install json-schema-editor

One Response

  1. GK PALEM March 15, 2019

Add Comment