Git Product home page Git Product logo

tangram-js / json-schema-editor Goto Github PK

View Code? Open in Web Editor NEW
268.0 15.0 44.0 95 KB

JSON Schema Editor is an intuitive editor for JSON schema. It provides a tree view to present the structure of schema, and a property inspector to edit the properties of schema element. Develop with Vue.js 2 and Firebase.

Home Page: https://json-schema-editor.tangramjs.com

License: GNU General Public License v2.0

JavaScript 43.36% HTML 0.13% Vue 56.51%
vuejs2 firebase json-schema editor single-page-app spa javascript

json-schema-editor's Introduction

json-schema-editor

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. Please reference the project website for detail.

Features

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.

Install

git clone https://github.com/tangram-js/json-schema-editor.git

Build

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

About Firebase Configuration

This project requires a valid Firebase configuration to function properly, please replace config in /src/firebase/index.js with your Firebase config:

// Initialize firebase
// Replace following config with your Firebase config
var config = {
  apiKey: 'your firebase api key',
  authDomain: 'your firebase auth domain',
  databaseURL: 'your firebase database url',
  projectId: 'your firebase project id',
  storageBucket: 'your firebase storage bucket',
  messagingSenderId: 'your firebase message sender id'
}

About JSON Editor

JSON Editor is successor of JSON Schema Editor, which is a schema-aware editor for JSON document including JSON schema. It provides a tree view to present the structure of JSON document, user could manipulate the JSON from context menu. There is a text view to present the content of JSON document, user may edit JSON within. They share user accounts and user schema repository, so user could use one account to login both editors and access schemas.

json-schema-editor's People

Contributors

dependabot[bot] avatar idjhuang avatar tangram-js avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

json-schema-editor's Issues

saved schemas not showing in UI at login

I have made several schemas and saved them on the website. After logging out and logging back in, they are not listed. If I upload from file or try to save a new schema of the same name, I receive the dialog that the existing schema will update. I did not download one of my schemas and would like to be able to access it. Is there anything I can do to do so?

cannot be used normally

Uncaught Error: FIREBASE FATAL ERROR: Cannot parse Firebase url. Please use https://.firebaseio.com

Delete property

When a required property is deleted, it is not being excluded from the required list.

Integer "minimum: 0" gets lost

The minimum property gets removed if its value is set to 0. This makes it impossible to restrict integers or numbers to only positive values.

load from file fails with error

The "load from file" feature for the schema editor is failing with the following error:

Load schema from file error: Cannot set property 'name' of undefined

The file was created using the editor and downloaded prior to attempting to load.

Integer/Number min/max incorrect.

According to the reference guide (https://json-schema.org/understanding-json-schema/reference/numeric.html#range) the valid values for defining ranges are:

  • minimum
  • maximum
  • exclusiveMinimum
  • exclusiveMaximum

The current version of the schema editor currently sets the excludeMinimum and excludeMaximum properties to a boolean value. I believe this to be incorrect as I can not find any references in the json schema RFC to these values. I believe this to be an issue that needs to be corrected.

Please let me know if any additional information is required.

definitions are not supported

I've tried to import a schema with definitions but it does not work.

How to reproduce

Just import a schema like bootstraprc.json

{
  "$schema": "http://json-schema.org/draft-04/schema#",
  "title": "JSON schema for Webpack's bootstrap-loader configuration file",
  "type": "object",

  "definitions": {
    "extractStyling": {
      "type": "object",
      "properties": {
        "extractStyles": {
          "default": false,
          "description": "Enables/disables extraction of styles to a standalone CSS file using extract-text-webpack-plugin",
          "type": "boolean"
        }
      }
    },

    "coreProperties": {
      "type": "object",

      "properties": {
        "appStyles": {
          "description": "Import your custom styles here. Usually this endpoint file contains a list of @imports of your application styles.",
          "type": "string"
        },
        "bootstrapCustomizations": {
          "description": "The .scss file path to be loaded after Bootstrap's _variables.scss file",
          "type": "string"
        },
        "bootstrapVersion": {
          "default": 3,
          "description": "The major version of Bootstrap being used",
          "enum": [ 3, 4 ],
          "type": "integer"
        },
        "loglevel": {
          "description": "The verbosity of logging. Exclude this property to disable.",
          "enum": [ "debug" ],
          "type": "string"
        },
        "preBootstrapCustomizations": {
          "description": "The .scss file path to be loaded before Bootstrap's _variables.scss file",
          "type": "string"
        },
        "scripts": {
          "description": "Excludes/includes Bootstrap's JavaScript modules",
          "type": [ "boolean", "object" ]
        },
        "styleLoaders": {
          "default": [ "style", "css", "sass" ],
          "description": "An array of Webpack loader names. Order matters, and sass-loader is required.",
          "items": {
            "type": "string"
          },
          "minItems": 1,
          "type": "array",
          "uniqueItems": true
        },
        "styles": {
          "description": "Excludes/includes Bootstrap's CSS modules",
          "type": [ "boolean", "object" ]
        },
        "useCustomIconFontPath": {
          "default": false,
          "description": "Set to true if using a custom icon font and you need to specify its path in your Sass files",
          "type": "boolean"
        },
        "useFlexbox": {
          "default": true,
          "description": "Enables/disables the flexbox model available in Bootstrap 4",
          "type": "boolean"
        }
      }
    }
  },

  "allOf": [
    {
      "$ref": "#/definitions/coreProperties"
    },
    {
      "anyOf": [
        {
          "properties": {
            "env": {
              "description": "Sets the extractStyles property based on the value of NODE_ENV",
              "type": "object",
              "properties": {
                "development": {
                  "$ref": "#/definitions/extractStyling"
                },
                "production": {
                  "$ref": "#/definitions/extractStyling"
                }
              }
            }
          },
          "not": {
            "properties": {
              "extractStyles": { }
            },
            "required": [ "extractStyles" ]
          }
        },
        {
          "properties": {
            "extractStyles": {
              "$ref": "#/definitions/extractStyling/properties/extractStyles"
            }
          },
          "not": {
            "properties": {
              "env": { }
            },
            "required": [ "env" ]
          }
        }
      ]
    },
    {
      "required": [ "bootstrapVersion", "styleLoaders" ]
    }
  ]
}

Support for const

Support for const keyword would be nice to have .
For example :

    "type": "object",
    "additionalProperties": true,
    "properties": {
        "RequestTypeId": {
	   "type": "number",
            "const": 4
        },

Please input number

When I try to write the maximum value of a number it give me always the same error : Please input number.

Support for DBs outside of Firebase?

I'm wondering if there are any plans to expand the app to plug in other DB solutions (Postgres, Mongo, etc). It would be great to DBs outside of Firebase when required.

Feature request: Docker image

For those who aren't expert with Node.js, it would be lovely if you provided a Docker image so that we could install the editor w/o having to install all of its dependencies locally.

enum property being wrong created

When I add to a string or integer type an enum, the enum should be an array like this:
"type": "string", "enum": { "enum": [ "true" ] }
But it is wrong because it should be generated as an array without being wrapped with an "enum" object.
The right way should be something like this:
"type": "string", "enum": [ "true" ]

Possibility of exposing this project as a component library?

Hi there,

I've been looking for a way to embed a json schema editor into a project of mine (Happens to be made in Vue 2 aswell), and i came accross your repository here.

Is there any chance that this project could be made into a view componet/component lribary? That would make it much easier for this to be embeded into existing applications.

If not, would it be alright for me to fork this, and turn it into a component library?

Save and reload schema breaks enum

If add an enum property to an object it's represented like this:

 "end_code_type": {
            "enum": [
                "QRCODE",
                "NFCTAG",
                "BEACON"
            ]
        },

After saving and reloading the same schema the property looks like this:

       "end_code_type": [
            "QRCODE",
            "NFCTAG",
            "BEACON"
        ],

$ref can't be saved in firebase as a key because it contains '$'

Save custom schema error: Firebase.set failed: First argument contains an invalid key ($ref) in property 'schemas.xOW3vBZG7JSxJcqfilsEdUJ0ZnI2.Pool.items.0'. Keys must be non-empty strings and can't contain ".", "#", "$", "/", "[", or "]"

{
"type": "array",
"items": [
{
"$ref": "repository://Pool_member"
}
],
"title": "Pool",
"description": "Pool"
}

Support Subschema Validation with boolean logic ("allOf", "oneOf", "anyOf, "not") in conjunction with type validation

It appears that something as simple as the following isn't supported:

{
 "$id": "https:/com.foo.test.json",
 "$schema": "http://json-schema.org/draft-07/schema#",
 "definitions": {
   "aType": {
     "$id": "#aType",
     "description": "A Type",
     "type": "object",
     "allOf": [
       {
         "$ref": "#otherType"
       }
     ],
     "properties": {
       "field1": {
         "description": "A field",
         "type": "string"
       }
     }
   },
   "otherType": {
     "$id": "#otherType",
     "description": "Another type",
     "type": "object",
     "properties": {
       "field2": {
         "description": "A field",
         "type": "string"
       }
     }
   }
 }
}

The "allOf" construct in aType is simply dropped when importing this schema, and there is no way to create a schema with this structure in the editor.

A similar problem exists for "oneOf", "anyOf" and "not".

The editor does support a roughly equivalent structure of using a "oneOf" and nesting the object properties below this, but this doesn't help when trying to import existing schemas that already use the simpler approach.

Can't use "definitions" together with main schema

Given I add a "definitions" section with reusable schemas to the main schema
Then the "definitions" are not rendered in the right panel
And the "definitions" are not saved and restored on load
Unless I move the "definitions" section up using the context menu in the tree editor
But then the main schema is not shown
And the main schema is not saved and restored on load

"type" as a property key is not supported

When importing a schema that has a property with a key named "type" the editor reports an error:
Load schema from file error: JSON.parse: expected ',' or '}' after property value in object at line 83 column 7 of the JSON data

The property looks like this:
"Membership": {
"type": "object",
"properties": {
"level": {
"description": "Status or level of membership.",
"type": "string"
},
"name": {
"description": "The name of the membership.",
"type": "string"
},
"number": {
"description": "The membership number assigned to the member.",
"type": "string"
},
"type": {
"description": "The type of membership.",
"type": "string"
}
}

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.