node package manager
Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »


npm package Build Status # React Form Builder A complete react form builder that interfaces with a json endpoint to load and save generated forms. The toolbox contains 16 items for gathering data. Everything from star ratings to signature boxes!

Basic Usage

var React = require('react');
var FormBuilder = require('react-forms-builder');
  <FormBuilder.ReactFormBuilder />,


var items = [{
  key: 'Header',
  name: 'Header Text',
  icon: 'fa fa-header',
  static: true,
  content: 'Placeholder Text...'
  key: 'Paragraph',
  name: 'Paragraph',
  static: true,
  icon: 'fa fa-paragraph',
  content: 'Placeholder Text...'
  saveUrl='path/to/POST/built/form.json' />

React Form Generator

Now that a form is built and saved, let's generate it from the saved json.

var React = require('react');
var FormBuilder = require('react-forms-builder');
    task_id={12} // Used to submit a hidden variable with the id to the form from the database. 
    answer_data={JSON_ANSWERS} // Answer data, only used if loading a pre-existing form with values. 
    authenticity_token={AUTH_TOKEN} // If using Rails and need an auth token to submit form. 
    data={JSON_QUESTION_DATA} // Question data 

Vendor Dependencies

In order to make the form builder look pretty, there are a few dependencies other than React. See the example code in index.html for more details.

  • Bootstrap
  • FontAwesome
  • jQuery


All relevant styles are located in css/application.css.scss.


$ npm install
$ npm start

Then navigate to http://localhost:8080/ in your browser and you should be able to see the form builder in action.


$ npm test

In order to run tests you will need to install Cairo which is needed for node-canvas. Go to for more details.