All Projects → jsonform → Jsonform

jsonform / Jsonform

Licence: mit
Build forms from JSON Schema. Easily template-able. Compatible with Bootstrap 3 out of the box.

Programming Languages

javascript
184084 projects - #8 most used programming language
HTML
75241 projects

Projects that are alternatives of or similar to Jsonform

Vue Form Json Schema
Create forms using JSON schema. Bring your components!
Stars: ✭ 253 (-89.53%)
Mutual labels:  json-schema, json, forms
React Json Editor
A dynamic form component for react using JSON-Schema.
Stars: ✭ 201 (-91.68%)
Mutual labels:  json-schema, json, forms
React Jsonschema Form
A React component for building Web forms from JSON Schema.
Stars: ✭ 10,870 (+349.92%)
Mutual labels:  json-schema, json, forms
Jsonforms
Customizable JSON Schema-based forms with React, Angular and Vue support out of the box.
Stars: ✭ 542 (-77.57%)
Mutual labels:  json-schema, json, forms
Schema Registry
Confluent Schema Registry for Kafka
Stars: ✭ 1,647 (-31.83%)
Mutual labels:  json-schema, json
Jafar
🌟!(Just another form application renderer)
Stars: ✭ 107 (-95.57%)
Mutual labels:  json, forms
Liform
PHP library to render Symfony Forms to JSON Schema
Stars: ✭ 113 (-95.32%)
Mutual labels:  json-schema, forms
Snodge
Randomly mutate JSON, XML, HTML forms, text and binary data for fuzz testing
Stars: ✭ 121 (-94.99%)
Mutual labels:  json, forms
Neo
Create blazing fast multithreaded Web Apps
Stars: ✭ 1,219 (-49.54%)
Mutual labels:  json, html5
Npoint
JSON storage bins with schema validation
Stars: ✭ 116 (-95.2%)
Mutual labels:  json-schema, json
Liformbundle
Symfony Bundle to render Symfony Forms to JSON Schema
Stars: ✭ 124 (-94.87%)
Mutual labels:  json-schema, forms
Json Node Normalizer
'json-node-normalizer' - NodeJS module that normalize json data types from json schema specifications.
Stars: ✭ 105 (-95.65%)
Mutual labels:  json-schema, json
Ngx Formly
JSON powered / Dynamic forms for Angular
Stars: ✭ 2,109 (-12.71%)
Mutual labels:  json-schema, forms
Json Schema Spec
The JSON Schema I-D sources
Stars: ✭ 2,441 (+1.03%)
Mutual labels:  json-schema, json
Play2 Html5tags
HTML5 form tags module for Play Framework
Stars: ✭ 101 (-95.82%)
Mutual labels:  forms, html5
Typedload
Python library to load dynamically typed data into statically typed data structures
Stars: ✭ 120 (-95.03%)
Mutual labels:  json-schema, json
React
JSON powered forms for React.js
Stars: ✭ 142 (-94.12%)
Mutual labels:  json, forms
Go Jsonschema
A tool to generate Go data types from JSON Schema definitions.
Stars: ✭ 164 (-93.21%)
Mutual labels:  json-schema, json
Newtonsoft.json.schema
Json.NET Schema is a powerful, complete and easy to use JSON Schema framework for .NET
Stars: ✭ 167 (-93.09%)
Mutual labels:  json-schema, json
Schemasafe
A reasonably safe JSON Schema validator with draft-04/06/07/2019-09 support.
Stars: ✭ 67 (-97.23%)
Mutual labels:  json-schema, json

JSON Form

MIT license PRs Welcome Maintained Release NPM: released

The JSON Form library is a JavaScript client-side library that takes a structured data model defined using JSON Schema as input and returns a Bootstrap 3-friendly HTML form that matches the schema.

The generated HTML form includes client-side validation logic that provides direct inline feedback to the user upon form submission (provided a JSON Schema validator is available). If values are valid, the JSON Form library uses submitted values to create the JavaScript data structure that matches the data model.

The layout of the generated HTML form may be entirely fine-tuned through a simple declarative mechanism.

Getting started

The example below creates a form that asks for the user's name and age. The user's name is a required field, while the age is optional.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Getting started with JSON Form</title>
    <link rel="stylesheet" style="text/css" href="deps/opt/bootstrap.css" />
  </head>
  <body>
    <h1>Getting started with JSON Form</h1>
    <form></form>
    <div id="res" class="alert"></div>
    <script type="text/javascript" src="deps/jquery.min.js"></script>
    <script type="text/javascript" src="deps/underscore.js"></script>
    <script type="text/javascript" src="deps/opt/jsv.js"></script>
    <script type="text/javascript" src="lib/jsonform.js"></script>
    <script type="text/javascript">
      $('form').jsonForm({
        schema: {
          name: {
            type: 'string',
            title: 'Name',
            required: true
          },
          age: {
            type: 'number',
            title: 'Age'
          }
        },
        onSubmit: function (errors, values) {
          if (errors) {
            $('#res').html('<p>I beg your pardon?</p>');
          }
          else {
            $('#res').html('<p>Hello ' + values.name + '.' +
              (values.age ? '<br/>You are ' + values.age + '.' : '') +
              '</p>');
          }
        }
      });
    </script>
  </body>
</html>

Loading this page in a browser renders a form with two input fields and a submit button. The onSubmit function is called upon form submission. If you press "Submit" without entering values or if the age you enter is not a number, error messages appear next to the input fields.

NB: Paths in this example are relative to the root of the JSON Form project.

Documentation

You can do much more with the JSON Form library. You may define a more complex data model that includes arrays and objects for instance, or you may control the layout of the form to include fieldsets, expandable sections or tabs. For more information, check the reference documentation for JSON Form.

Playground

If you're more of the acting type than of the reading type, the JSON Form Playground is a simple JSON Form editor that lets you try out and extend all the examples in the doc.

Dependencies

At a minimum, the JSON Form library depends on:

The JSON Form library may require further libraries, depending on the features you need for the forms you need to render. In particular:

  • ACE is needed to render rich text input fields. The deps/opt/ace folder contains a minimal set of files from ACE to render a JSON input field. Beware that the code of ace.js needs to be encapsulated in (function(require,define,requirejs) {...})(undefined,undefined,undefined); before it may be used within JSON Form.
  • Bootstrap v3.3 or above is more or less needed (unless you enjoy ugly forms, that is) if you don't provide your own styles. JSON Form only needs the bootstrap.css file.
  • The JSON Schema Validator is used to detect and report validation errors upon form submission. The deps/opt folder contains a "build" of the JSON Schema Validator for use in JSON Form.
  • Bootstrap Dropdowns v2.0.3 or above is needed for imageselect fields.
  • jQuery UI Sortable v1.8.20 or above is required for drag-and-drop support within arrays and tabarrays. Note the plugin itself depends on jQuery IU Core, jQuery UI Mouse, and jQuery UI Widget.
  • wysihtml5 is required if the form uses wysihtml5 textarea fields.
  • Spectrum is required if the form uses color fields.

All of these libraries are in the deps folder for now, although you might want to check their respective Web site for more recent versions.

NB: JSON Form also uses JSON.parse and JSON.stringify which is normally already natively supported by all modern browsers.

License

The JSON Form library is licensed under the MIT license.

All the libraries that JSON Form may depend on are licensed under the MIT license, except for the JSON Schema Validator, licensed under the BSD 3 Clause license and the ACE editor licensed under the Mozilla tri-license (MPL/GPL/LGPL).

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].