[Django]-How to Create a form from a json-schema?

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)

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

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.

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)

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

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

Have a look at this demo (source code) of ngx-schema-form :

• 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.

I have found https://form.io, it’s by far, the most advanced project in this matter i have found. Draggable form creates the schema that renders. His core is opensourced.

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.