Json Schema Form Generators

Loading

Here is my journey selecting a JSON Schema Form Generator.


Json Schema Form Generators performs multiple functions.  They generate a form on the client, they validate the input data, and they validate it again on the server.  There is a big list of the different  Web UI generators. Too many to choose from.  It took a long time to even figure out how to choose them. 

Basically the data arrives from the server as a tree, is edited in the browser, and the form fields have to synchronize with the data model.   React and Vue do this kind of thing.  React does static binding, Vue does dynamic binding.  but the library which has the most plugins is done in plain old Javascript. 

JSON-EDITOR

Initially I tried JSON-EDITOR.  It is quite good.  It came up quickly.  Lots of plugins.  Lots of stars.  With Bootstrap 4, it looks okay.  It has two bug, namely that validation errors do not percolate up to the tabs. . It also has the problem that it is hard to set the ace editors height correctly, and even more difficult to reset it as it grows. If you think of all that is going on in the form building, it makes sense to me that it could not manage that complexity  I am sure it has other problems.  One needs a higher level of abstraction.    

I quite like vue.js. They create components out of HTML, CSS and Javascript.  The components interact with each other.  It looks like a great platform for doing JSON Schema forms.  Here is a review of the different vue.js json schema form builders.  If you read carefully only two support nested objects.   And maybe none support Bootstrap 4, but maybe that is a limitation of Bootstrap 4. 

VJSF

The first one I tried is  https://github.com/koumoul-dev/vuetify-jsonschema-form (VJSF).   Gorgeous.  Based on Vuetify.  Validation errors percolate up to the tabs.  It does nested forms.  I am so sold on it, but sadly it does not do all that I need.   It does have a WYSIWYG text editor, but one needs to use Node.js to use it.  The Tip Tap ecditor does not install from CDN.  No thanks.  Also Vue does not work natively with the Ace Editor.  you have to define custom slots and update them manually.  Also no thanks.  You could use a wrapper around an ace component.   I really do not want to become a node developer just for the pretty interface.   If I drop the need for an HTML WYSIWYG editor it would work fine for my politician;s form.  I am quite tempted to do that.   But for now it has been put on the back burner, while I try to find something better. 

 

Vuetify Forms Base

So I looked more closely at https://github.com/wotamann/vuetify-form-base.  It even has a tree view. Nicer docs, but 1/2 as many users.   And worse yet, does not support Ace or RTF editors.    But sadly it does not yet support Vue 3. Maybe that is not a problem.  It has less starts than VJSF, so it must have some advantages or no one would be using it.  I asked what its advantages are, and am waiting for an answer.  

jsonform/jsonform

I finally landed on jsonform/jsonform.   And here they have a playground,    Nested, Ace, even allows for modification to the layout.  Brilliant.  And additional html fragments to be inserted all over the place.  2.2K starts.  March 2021.   It very wisely separates out the form layout form the json schema definition.  I did not at first like that, but now I get it.  Sadly I could not get the  WYSIHTML5 editor to work, so I am returning to JSON-Editor, the one I first tried. 

The Hidden Truth

I present this whole journey as a very linear experience.  It was NOT!  I tried this, it did not work, I tried that, other problems.  I came back to each oft these multiple times, and in the process was educated.   The whole experience was brutally painful, but in the end, I have a much better collection of tools. 

Conclusion

Json Schema Form Builders are a great idea.   For the longest time I have been using interface definitions, but they were mostly flat.  Nested is way way better.  Automatic gorgeous GUI's are also great.  But somehow the reality is not quite there.  Why not?  I do not know.  I feel like we are pushng the limits of the complexity which is humanly manageable.  i do not know the answer.