Schema-based JSON editor

7,516 views
Skip to first unread message

exavolt

unread,
Dec 20, 2011, 12:17:01 PM12/20/11
to json-...@googlegroups.com
Currently I'm writing a schema-based JSON editor. It's web-based, written in JavaScript (jQuery).

I started it because the company I working for was looking for data editor. The data themselves are too complex to be presented with simple tables (and spreadsheets). JSON-like structured document is more appropriate. And because JSON editing is hard thing to do for non-programmers, I've decided to write an application which able to generate form from schema and use the same schema to validate the input. (Yes, there are some other attempts already, but they don't fit our needs).

Demonstrations:

http://exavolt.github.com/onde/#?schema_url=schemas/commonjs-package-1.0.json
http://exavolt.github.com/onde/#?schema_url=schemas/npm-package.json

You could also create or load your own schema. Note if you want to load schema from your server: the schemas may need to be served with appropriate CORS policy (example case: you may not be able to load schemas from json-schema.org because of the CORS policy).

The implementation is far from complete. It's basically something which works for my needs. Some notable missing features:

* No support for schema reference (will simply display the URL/URI)
* No support for union (and thus could not be used to create schema)
* No support for property dependencies
* No good error reporting.


Any feedback would be appreciated.

pnic...@gmail.com

unread,
Dec 21, 2011, 7:05:14 PM12/21/11
to json-...@googlegroups.com
Nice job so far! 

I found your post from a websearch, I'm also looking for a decent way to make json-editor forms that enforce correct input.

I've looked at this http://robla.net/jsonwidget/ - it actually works well, but it uses its own schema and the UI makes it pretty hard to read. You say your UI is not well-designed, but of the things I've looked at so far it's easily the most readable and would be good enough for anything I would need.

Unfortunately there are already a lot of competing JS schema out there - Mongoose, Backbone.js etc. In an ideal world it would be nice to have a library like yours that was made to be pluggable with the different formats & validation schemes.. but that would be a big job, and I'm not volunteering :)

I will look at this more in the next few weeks and see if there's a way I can contribute. Right now error reporting would be the main missing feature for me, since the idea is to make it easy for non-programmers to enter data. #2 on the wish list would be the ability to use it to create schema (this would normally be done by programmers so it's not a deal-breaker, but hand-editing JSON is such a pain).



exavolt

unread,
Dec 22, 2011, 7:16:14 AM12/22/11
to json-...@googlegroups.com
Thanks for the response.

For the UI, again, just as what I like. ;) There are some areas need some attention though, including how union should be presented (the reason why I haven't implemented it). And if there's any input from the experts, I would like to listen.

Yes. The sad thing is there are lot of schema out there (don't forget Kwalify). I would like to make mine to be pluggable (in fact, my project was actually a front-end for MongoDB, which has a different set of types than the JSON has). Even actually, I want it to be an editor for any JSON-like structured format (including YAML and maybe conf files). But, like as you said, it will be a big job. So, those are for later.

My current priority is to make this component more solid. For example, a better error reporting is on the top of my priority list (our data editor person complained about it ;).

And, don't hesitate to write anything to the tracker :)

jussi.a...@gmail.com

unread,
Dec 28, 2011, 8:39:28 AM12/28/11
to json-...@googlegroups.com
Hi.

I was researching different JSON schema implementations and found this. Idea of using an official JSON schema standard (or even draft) is enticing.

Have you noticed the jquery.dform plugin?

https://github.com/daffl/jquery.dform

It contains rudimentary support for JSON schema:
https://github.com/daffl/jquery.dform/blob/master/src/dform.converters.js

I was just wondering if you would see any benefit in combining your efforts with the dforms's implementation? I have been building a converter from my own JSON schema to dform's. Possibility of moving to official schema standard would be better option in the long run.

Thank you.


Jussi

sergey

unread,
Mar 1, 2012, 3:57:17 PM3/1/12
to json-...@googlegroups.com
Nice job! Your code helped me alot to prove usage of JSON schema. And I like your UI too. The only problem that I experience is support for default  arrays and their merges with json file itself. I want to generate the following json file out of empty json file instance and json schema with default arrays
{
  "my4integers": [
    0,
    0,
    0,
    300
  ]
}

The original json file (instance) is empty object
{}

Here are 2 json schemas that suppose to define the same json file structure
{
    "title": "deafult array of integers",
    "type": "object",
    "properties": {
    "my4integers":{
     "required":true,
 "description": "Array of 4 integers",
 "type": "array",
 "items": [
       {"type":"integer","default":0},
       {"type":"integer","default":0},
       {"type":"integer","default":0},
       {"type":"integer","default":300}
 ],
 "minItems":4,
 "maxItems":4
    }  
    }  
}

and
{
    "title": "deafult array of integers",
    "type": "object",
    "properties": {
    "my4integers":{
     "required":true,
 "description": "Array of 4 integers",
 "type": "array",
 "default":[0,0,0,300],
 "items": {
     "title": "Array values",
     "type":"integer"
 },
 "minItems":4,
 "maxItems":4
    }  
    }  
}

In both cases when I click "Generate" button it throws exception which I consider the wrong thing. Another thing, that when I expand array tag it should show me immediately the whole array of 4 values so that I don't need to add them manually (add). It should be at least "minItems" entries and "add" button should be disables when number of items reach "maxItems"

-Sergey

skie...@gmail.com

unread,
Mar 4, 2012, 7:58:55 AM3/4/12
to json-...@googlegroups.com
It's very good, I look forward to playing with it. I see you added your solution to the stackoverflow question about

Web-based JSON editors.


FWIW inputEx isn't on that list but seems the most powerful, as you can use its form builder to create a new JSON form definition for its form builder. Supposedly it can convert between its own schema (with lots of form control attributes) and JSON schema. It's big and complicated and based on YUI rather than jQuery.

nab...@gmail.com

unread,
May 23, 2012, 2:15:13 PM5/23/12
to json-...@googlegroups.com
Are you planning to continue working on this? I hope so, it's quite useful. I'm planning to use it in one of my projects.

Huy

unread,
Sep 14, 2012, 1:42:45 PM9/14/12
to json-...@googlegroups.com, nab...@gmail.com
When I'm looking for a JSON GUI editor, i.e. JSON form builder, I look for something based on JSON Schema, so that I can properly define how the JSON will be validated.

With just that in mind, https://github.com/exavolt/onde is decent, but insufficient and not actively developed.

However, for defining the proper presentational/UI behavior, you need more than what JSON Schema defines. In that vein, I have found 3 projects that extend beyond JSON Schema to generate JSON forms:

They take slightly different approaches. All these are actively being developed.

Also, there's this great tool to get you started on generating a JSON Schema: http://www.jsonschema.net/ . Just feed a sample JSON file and out comes out a JSON Schema that you can then tweak.

nabeel....@gmail.com

unread,
Aug 28, 2013, 8:34:36 AM8/28/13
to json-...@googlegroups.com
can u tel me how u  convert the json schema to form..what logic ......??????

Geraint

unread,
Aug 28, 2013, 10:13:50 AM8/28/13
to json-...@googlegroups.com, nabeel....@gmail.com
Well, I can't speak for anyone else's tool, but generally the constraints in a schema usually say something about the way they could be presented to the user.

There are some possibilities based on the basic type (null/boolean/integer/string/object of the data:
  • Objects could be represented as groups of fields (e.g. <fieldset>)
  • Booleans could be checkboxes
  • Strings could be a simple text-input (<input type="text"> or <textarea>)

From there, you just look at the possible schema keywords, try to understand what they mean for the data, and then how you might represent that in a form.

For example, if a given property is not "required" in the schema, then it is optional - how do you represent an optional property in an object?  Maybe a checkbox to indicate whether it's present or not?

Another example: if a schema specifies "enum", then the value has to be one of those exact values.  Is there a nice form control that forces you to choose between a set of fixed options?  Yes - enums could be a drop-down (<select>), or perhaps a set of radio-buttons.

One thing to note that there are no hard-and-fast rules.  If the schema says something is a string, then is it a single-line input, or a multi-line text area?  Is an "enum" schema a drop-down or a set of radio-buttons?  It's up to the individual library.

Geraint

unread,
Aug 28, 2013, 10:17:34 AM8/28/13
to json-...@googlegroups.com, nabeel....@gmail.com
If you're asking how to use a particular library, then you should probably read any docs, and ask the developer if you get stuck.

Exavolt: I don't see this project in the implementations list.  There's a "UI generation" section - should it be added?


On Wednesday, August 28, 2013 1:34:36 PM UTC+1, nabeel....@gmail.com wrote:
Reply all
Reply to author
Forward
Message has been deleted
0 new messages