formatic

Formatic

Automatic forms.

Warning!

Formatic is currently early alpha and still in heavy development. Everything is subject to change! You should probably just look away till this warning goes away!

Start hacking

git clone [e-mail]:zapier/formatic.git
cd formatic
npm install
gulp live

Point your browser to localhost:3000/index.html. Hack away on the code, and the browser will automatically reload with your changes.

Build

git clone [e-mail]:zapier/formatic.git
cd formatic
npm install
gulp build

This will build two files: formatic-min.js (minified) and formatic-dev.js (not minified and includes source maps for development).

What is formatic?

Formatic is a configurable, pluggable forms builder. Out of the box, it can build React-based forms, but you can configure it and add/remove plugins to make it work exactly how you want.

Using formatic (quick version)

If you don't want to extend formatic, you'll use it like this:

// Get the default formatic instance.
var formatic = require('formatic');

// Get a new form.
var form = formatic();

// Add some fields.
form.fields([
  {
    type: 'text',
    key: 'firstName'
  },
  {
    type: 'text',
    key: 'lastName'
  }
]);

// Give the form some data.
form.set({
  firstName: 'Joe',
  lastName: 'Foo'
});

// Render the form to some node.
form.attach(document.body);

// Watch for changes.
form.on('update', function () {
  // Get the data back out of the form.
  console.log(JSON.stringify(form.val()));
});

// Later on, change some data, and the form will update.
form.set('firstName', 'Joseph');