JSONForms uses HTML custom elements and eliminates the need to write HTML templates in order to create forms by leveraging the capabilities of JSON and JSON schema.
JSONForms is based on Custom elements,
which are not yet supported by all browsers, hence you'll need to include additional files in order to enable Custom Elements support:
These files are webcomponents-lite.js and native-shim.js as well as JSONForms itself via jsonforms.js.
Pay attention to the order when including these files.
Once you add a json-forms element to the DOM with at least a data attribute set,
a form will be rendered for you.
Data and UI schemas can be configured by the dataSchema and uiSchema attributes.
Use CSS to style the form however you want.
npm install jsonforms@nextwebcomponents-lite.js, native-shim.js, jsonforms.js and jsonforms-example.css to your HTML <head>
<script src="/node_modules/@webcomponents/webcomponentsjs/webcomponents-lite.js"></script>
<script src="node_modules/jsonforms/lib/native-shim.js"></script>
<script src="node_modules/jsonforms/dist/jsonforms.js"></script>
<link rel="stylesheet" type="text/css" href="node_modules/jsonforms/dist/jsonforms-example.css">
</head>
json-forms element:<script>
var jsonForms = document.createElement('json-forms');
jsonForms.data = {name:'John Doe'};
document.body.appendChild(jsonForms);
</script>
The whole document may for example now look like this:
<!DOCTYPE html>
<html>
<head>
<script src="node_modules/jsonforms/lib/native-shim.js"></script>
<script src="node_modules/jsonforms/dist/jsonforms.js"></script>
<link rel="stylesheet" type="text/css" href="node_modules/jsonforms/dist/jsonforms-example.css">
</head>
<body></body>
<script>
var jsonForms = document.createElement('json-forms');
jsonForms.data = {name:'John Doe'};
document.body.appendChild(jsonForms);
</script>
</html>
<script>
var jsonForms = document.createElement('json-forms');
jsonForms.data = {name:'John Doe'};
jsonForms.dataSchema = {type: "object", properties: {name : { type: "string"}}};
jsonForms.uiSchema = {type: "Control", scope: { $ref: "#/properties/name" } };
document.body.appendChild(jsonForms);
</script>
npm installnpm install -g typescriptnpm run buildnpm run testnpm run dev, point your browser to http://localhost:8080/The JSONForms project is build and tested via Travis. Coverage is documented by Coveralls.
Current status: 
npm run publish-patch,npm run publish-minor or npm run publish-major.The script does the following:
dist/**/* directoryIf any of the steps fail the script will abort. If the script was successful you should create a pull-request with the version bump commit to 'upstream'.
The JSONForms project is licensed under the MIT License. See the LICENSE file for more information.
Our current roadmap is available here.
FAQs
Generating forms for JSON schema
The npm package jsonforms receives a total of 198 weekly downloads. As such, jsonforms popularity was classified as not popular.
We found that jsonforms demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
A threat actor's playbook for exploiting the npm ecosystem was exposed on the dark web, detailing how to build a blockchain-powered botnet.
Security News
NVD’s backlog surpasses 20,000 CVEs as analysis slows and NIST announces new system updates to address ongoing delays.
Security News
Research
A malicious npm package disguised as a WhatsApp client is exploiting authentication flows with a remote kill switch to exfiltrate data and destroy files.