TypeScript icon, indicating that this package has built-in type declarations

0.6.1 • Public • Published

React Form Generator with UI Fabric React Components

All of you are very welcome to contribute with this project!

Join the chat at npm version License: MIT Build Status Dependency Status codecov Downloads

Responsive form generator with JSON for react. UI Fabric and other controls are used for rendering the 24 control types.


  • Validation
  • Translatable form
  • With custom controls, validators, and custom actions enhanceable
  • Responsive
  • 24 Out of the Box controls
  • 10 Validators

The Basic Code for the validation for the formula comes from the experiments from UI Fabric
UI Fabric Form Experiments


The package can be installed via NPM:

npm install formgen-react --save

If you not just add, then add the babel-polyfill to your project:

npm install babel-polyfill

Then add at your entry point the statement:

import 'babel-polyfill/browser.js';

Otherwise you get Problems with some browsers.


Full documentation


The example below shows how to use the form generator with a simple json definition. This JSON need to map to the JSON schema:

import * as React from 'react';
import Form from 'formgen-react';
var jsonForm = require('./test.json');
export class Example extends React.Component {
render() {
  return (
    onCancelForm={ () => console.log("cancel click") }
    onSubmitForm={ (formData:any) => console.log("submit click: " + JSON.stringify(formData)) }
    jsonFormData={jsonForm}  />)

The above ./test.json file could look like this:

     "$schema": "../schemas/jfrom-schema.json",
     "id": "testform",
     "theme": "red",
     "title": "Test EN",
     "title_trans": {
         "de": "Test DE",
         "fr": "Test FR",
         "it": "Test IT"
    "rows": [{
        "columns": [{
                "controls": [{
                    "id": "info",
                "title": "<b>This is a Info about this Test Document in Englisch</b>",
                "control_type": [ "InfoText" ],
                "title_trans": {
                    "de": "<b>Das ist ein Info Text über dieses Dokument in Deutsch</b>",
                    "fr": "<b>Ceci est un texte d'information sur ce document en français</ b>",                    
                    "it": "<b>Questo è un testo informativo su questo documento in italiano</ b>"

The JSON has to fit the Schema Definition:
Form Schema
You need also the following global Schemas:
Object Translation

Translating / Localization

The form is fully translatable. Included are default translations for DE, IT, EN, and ES. Time and Date Controls can be localized. If you want provide other language, please let me know, or contribute with other languages.

Browser Support

The most Controls are UI Fabric Control. Also the Layout classes comes from UI Fabric. Here the Browser Support for UI Fabric: Browser support

Local Development

The master branch contains the latest version of the Form component. To start your example app, you can run npm start. This starts a simple webserver on http://localhost:3000.

You can run npm test to execute the test suite. To help you develop the component we’ve set up some tests that cover the basic functionality for every control (in every control folder).


Copyright (c) 2018 to hilkenan and individual contributors. Licensed under MIT license, see LICENSE for the full license.

Package Sidebar


npm i formgen-react

Weekly Downloads






Unpacked Size

1.43 MB

Total Files


Last publish


  • hilkenan