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?

Solution 1

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

https://github.com/joshfire/jsonform

Solution 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)

Solution 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).

Solution 4

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.

Solution 5

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

JSONForms extends the 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. It supports React, Angular, and Vue.

GitHub: JSONForms (Demo)

View more solutions