How to Create a form from a json-schema?

Question

How to create form from JSON Schema?

I am writing code in JavaScript and jquery. With this template part like Form I am creating this with haml and adding this in js file. For backend I am using python. I am using Django framework.

So I got some links for create form from JSON Schema.

Reference link : http://neyric.github.io/inputex/examples/json-schema.html

In my Form : Input elemets : textboxes, textarea, select list, submit and cancel buttons are present.

So I want to ask is creating form with JSON schema is feasible or not? If yes then, can you provide some good links?

Answer 1

jsonform - Build forms from JSON Schema. Easily template-able. Compatible with Twitter Bootstrap out of the box.

https://github.com/joshfire/jsonform

Answer 2

I've been looking for the same, and turns out there are some good options. These are the best libraries I could find on GitHub:

• JSON Editor (plain JS) (demo)

• Angular Schema Form (AngularJS) (demo)

• React JSONSchema Form (React) (demo)

Answer 3

You are looking for Alpaca Forms. http://www.alpacajs.org

JSON Schema driven forms using jQuery with layout engines for Bootstrap, jQuery UI / Mobile. It's very extensible and pretty decked out.

Apache 2.0 licensed and awesome community (I am a code committer).

Answer 4

Just stumbled upon this question and wanted to add this new option:

JSONForms extends the AngularJS view model approach by eliminating the need to write HTML templates in order to create forms by leveraging the capabilities of JSON and JSON schema.

GitHub: JSONForms (Demo)

Answer 5

Form generation from JSON Schema is a common practice, specially for automatically generated user interfaces.

In your case, if you are only interested in creating ONE form, maybe it will be better to directly code it.

Here is a library I have created that hopefully you find interesting:

json-forms:

JSON Schema to HTML form generator, supporting dynamic subschemas (on the fly resolution). Extensible and customizable library with zero dependencies. Bootstrap add-ons provided

Live demo at http://brutusin.org/json-forms

Answer 6

Another option is "json-schema-js-gui-model". It converts the json schema into a gui model that you can easily use in any web framework to create a custom form. For detailed advice on the last step, the angular 2 docs has a recipe for creating a dynamic form from a gui model.

Answer 7

Look at this project https://github.com/mirshahreza/json-edit

A jquery plugin to turn json schema to form It may be helpful in your scenario

Answer 8

Have a look at this demo of ngx-schema-form :

http://guillotina.io/ngx-schema-form/dist/ngx-schema-form/json

• Takes a JSON schema file
• Generates that into a fully working editable web page form
• Saves changes to the JSON model as a Javascript object
• Allows adding custom validator code for any section

This works really well for me (I only found it a couple of days ago). I use it with the latest Angular, and it is working exactly as documented. The examples source is here:

https://github.com/guillotinaweb/ngx-schema-form/tree/master/src/app/json-schema-example

Answer 9

Or... you could take a look at outperform. It's a small javascript form generator library that I recently wrote to support my own projects because I got fed up by the fact that all the form generators that I looked at either had a ton of dependencies, or were distinctly larger than my single page web-application.

I mean, let's face it: if my SPA is like 20KB unminified but gzipped, then I expect library routines which do something simple as generating a form to be significantly smaller. Its main features would be:

• Zero dependencies.
• Less filling (unminified but gzipped: <2KB).
• Native HTML5/browser validation support for all HTML5+ input types.
• Custom validation seemlessly integrated.
• Supports all web frameworks out there (including Bootstrap).
• Autorefills half-filled forms when reloading a page in all browsers.
• JSON set/get for all form values.