All Projects → brutusin → Json Forms

brutusin / Json Forms

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

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Json Forms

Vue Form Json Schema
Create forms using JSON schema. Bring your components!
Stars: ✭ 253 (-53.92%)
Mutual labels:  json-schema, json, form
Json Schema To Ts
Infer TS types from JSON schemas 📝
Stars: ✭ 261 (-52.46%)
Mutual labels:  json-schema, json
fform
Flexibile and extendable form builder with constructor
Stars: ✭ 26 (-95.26%)
Mutual labels:  json-schema, form
Jsonforms
Customizable JSON Schema-based forms with React, Angular and Vue support out of the box.
Stars: ✭ 542 (-1.28%)
Mutual labels:  json-schema, json
react-jsonschema-formbuilder
No description or website provided.
Stars: ✭ 45 (-91.8%)
Mutual labels:  json-schema, form
scalable-form-platform
A solution for building dynamic web forms with visual editor
Stars: ✭ 109 (-80.15%)
Mutual labels:  json-schema, form
Vue Json Schema Form
基于Vue/Vue3,Json Schema 和 ElementUi/antd/iview3 等生成 HTML Form 表单,用于活动编辑器、h5编辑器、cms等数据配置;支持可视化生成表单Schema 。 Generate a form using Vue/Vue3, Json Schema and ElementUi/antdv/iview3
Stars: ✭ 300 (-45.36%)
Mutual labels:  json-schema, form
Jsonon
A json online view
Stars: ✭ 228 (-58.47%)
Mutual labels:  json-schema, json
Pyjfuzz
PyJFuzz - Python JSON Fuzzer
Stars: ✭ 342 (-37.7%)
Mutual labels:  json-schema, json
Json
C++ header-only JSON library
Stars: ✭ 343 (-37.52%)
Mutual labels:  json-schema, json
Formily
Alibaba Group Unified Form Solution -- Support React/ReactNative/Vue2/Vue3
Stars: ✭ 6,554 (+1093.81%)
Mutual labels:  json-schema, form
Vue Json Ui Editor
Edit JSON in UI form with JSON Schema and Vue.js
Stars: ✭ 392 (-28.6%)
Mutual labels:  json-schema, json
Full Stack Fastapi Couchbase
Full stack, modern web application generator. Using FastAPI, Couchbase as database, Docker, automatic HTTPS and more.
Stars: ✭ 243 (-55.74%)
Mutual labels:  json-schema, json
svelte-form
JSON Schema form for Svelte v3
Stars: ✭ 47 (-91.44%)
Mutual labels:  json-schema, form
Form Render
🚴‍♀️ 阿里飞猪 - 很易用的中后台「表单 / 表格 / 图表」解决方案
Stars: ✭ 3,881 (+606.92%)
Mutual labels:  json-schema, form
Json Schema Validator
A fast Java JSON schema validator that supports draft V4, V6, V7 and V2019-09
Stars: ✭ 292 (-46.81%)
Mutual labels:  json-schema, json
Verify Json
verify-json
Stars: ✭ 208 (-62.11%)
Mutual labels:  json-schema, json
Vue Json Edit
Visual JSON editor built as an vue component. Provides a basic GUI
Stars: ✭ 207 (-62.3%)
Mutual labels:  json-schema, json
Vue Form Builder
Build powerful vue form with JSON schema and composition api.
Stars: ✭ 325 (-40.8%)
Mutual labels:  json-schema, form
Native
Generate a form using JSON Schema and Vue.js
Stars: ✭ 382 (-30.42%)
Mutual labels:  json, form

json-forms

bower version Build Status

org.brutusin:json-forms is a javascript library that generates HTML forms from JSON Schemas.

Status

I am currently not having time to maintain this project, so first of all my apologies if some issues have been unresponded. Branch v2 contains a completely new rearchitecture of the project, that I started several months ago but left unfinished. If someone is interested in continuing my work I will be happy to guide them


Table of Contents:

Features

  • Dynamic schemas support
  • Extensible and customizable
  • No external libraries needed
  • Validation
  • Multiple forms per document supported

Usage

Include the main library dependencies:

<link rel="stylesheet" href='dist/css/brutusin-json-forms.min.css'/>
<script src="dist/js/brutusin-json-forms.min.js"></script>

Optionally, include the bootstrap extension (requires bootstrap):

<script src="dist/js/brutusin-json-forms-bootstrap.min.js"></script>

Create the javascript BrutusinForms instance, schema being a javascript object representing the schema structure:

var schema = {"type": "boolean"}
var BrutusinForms = brutusin["json-forms"];
var bf = BrutusinForms.create(schema);

And finally render the form inside a container with optional preloaded JSON initial data, data:

var container = document.getElementById('container');
bf.render(container, data);

Demo

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

Dynamic schemas

This library supports dynamic schemas, that is, subschemas that can change depending on the value of other parts of the data.

This lets creating dynamic forms that vary their shape depending on the values entered by the user. This is extremely useful for big autogenerated schemas, that aggregates lots of subschemas and have functional bindings, given that it allows to show the user a simpler, non-error-prone form, also avoiding asking for unneeded data.

Dynamic schemas are built upon two main blocks:

dependsOn schema extension

Dynamic schema resolution

API

Static members:

Member Description
BrutusinForms.create(schema) BrutusinForms factory method
BrutusinForms.addDecorator(f(htmlElement, schema)) Register a callback function to be notified after an HTML element has been rendered (passed as parameter). See brutusin-json-forms-bootstrap.js for an example of bootstrap decorator.
BrutusinForms.postRender(instance) Callback function to be notified after a BrutusinForms instance has been rendered (passed as parameter)
BrutusinForms.instances Array containing all the BrutusinForms instances created in the document by the factory method.

Instance members:

Member Description
bf.render(container, data) Renders the form inside the the container, with the specified data preloaded
bf.validate() Returns true if the input data entered by the user passes validation
bf.getData() Returns the javascript object with the data entered by the user
bf.schemaResolver(schemaIdArray, data) Schema resolver for dynamic schemas

CDN

http://www.jsdelivr.com/projects/brutusin.json-forms

Support bugs and requests

https://github.com/brutusin/json-forms/issues

Authors

Contributions are always welcome and greatly appreciated!

License

Apache License, Version 2.0

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