diff --git a/demo/Client.js b/demo/Client.js
new file mode 100644
index 0000000..624d553
--- /dev/null
+++ b/demo/Client.js
@@ -0,0 +1,19 @@
+import React from 'react';
+import {Router} from 'react-router'
+import routes from './Routes';
+import configureStore from './store/configureStore';
+import {Provider} from 'react-redux';
+import {syncHistoryWithStore} from 'react-router-redux';
+import {browserHistory} from 'react-router'
+import {render} from 'react-dom';
+import './less/styles.less';
+
+const store = configureStore();
+const history = syncHistoryWithStore(browserHistory, store);
+
+render(
+    <Provider store={store}>
+        <Router history={history} routes={routes}/>
+    </Provider>,
+    document.getElementById('#app_container')
+);    
\ No newline at end of file
diff --git a/demo/Routes.js b/demo/Routes.js
new file mode 100644
index 0000000..38d8a30
--- /dev/null
+++ b/demo/Routes.js
@@ -0,0 +1,12 @@
+import React from 'react';
+import App from './containers/App';
+import Demo from './pages/Demo.js';
+
+import { Route, Redirect } from 'react-router';
+
+export default (
+    <Route component={App}>
+        <Route path="/redux-autoform-bootstrap-ui/demo.html" component={Demo}/>
+        <Redirect from="*" to="/redux-autoform-bootstrap-ui/demo.html" />
+    </Route>
+);
diff --git a/demo/Server.js b/demo/Server.js
new file mode 100644
index 0000000..34f4c90
--- /dev/null
+++ b/demo/Server.js
@@ -0,0 +1,36 @@
+import fs from 'fs';
+import React from 'react';
+import express from 'express';
+import path from 'path';
+import webpackConfig from '../webpack/webpack.config.demo.dev';
+import colors from 'colors';
+import webpackMiddleware from 'webpack-dev-middleware';
+import webpackHotMiddleware from 'webpack-hot-middleware';
+import webpack from 'webpack';
+
+const webpackCompiler = webpack(webpackConfig);
+
+require.extensions['.html'] = function (module, filename) {
+    module.exports = fs.readFileSync(filename, 'utf8');
+};
+
+const development = process.env.NODE_ENV !== 'production';
+let app = express();
+
+if (development) {
+    app.use(webpackMiddleware(webpackCompiler));
+    app.use(webpackHotMiddleware(webpackCompiler));
+    app.use(function renderApp(req, res) {
+        let wrap = require('./pages/BasePage.html')
+            .replace(/\$\{cssBundlePath\}/g, '')
+            .replace(/\$\{jsBundlePath\}/g, '/bundle.js');
+            
+        res.status(200).send(wrap);
+    });
+} else {
+    app.use(express.static(path.join(__dirname, '../demo-built')));
+}
+
+app.listen(4000, '0.0.0.0', function () {
+    console.log(colors.green(`React-metaform started at http://localhost:4000/. NODE_ENV: ${process.env.NODE_ENV}`));
+});
diff --git a/demo/actions/formOptions.js b/demo/actions/formOptions.js
new file mode 100644
index 0000000..2c77f74
--- /dev/null
+++ b/demo/actions/formOptions.js
@@ -0,0 +1,45 @@
+const UPDATE_FORM = 'UPDATE_FORM';
+const SET_STACKED_FIELD_LAYOUT = 'SET_STACKED_FIELD_LAYOUT';
+const SET_INLINE_FIELD_LAYOUT = 'SET_INLINE_FIELD_LAYOUT';
+const SET_EDIT_COMPONENT_FACTORY = 'SET_EDIT_COMPONENT_FACTORY';
+const SET_DETAILS_COMPONENT_FACTORY = 'SET_DETAILS_COMPONENT_FACTORY';
+
+/**
+ * Updates the form
+ */
+export const updateForm = (schema) => ({
+    type: UPDATE_FORM,
+    schema: schema
+});
+
+/**
+ * Sets the field layout as stacked
+ * @returns {{type: string}}
+ */
+export const setStackedFieldLayout = () => ({
+    type: SET_STACKED_FIELD_LAYOUT
+});
+
+/**
+ * Sets the field layout as inline
+ * @returns {{type: string}}
+ */
+export const setInlineFieldLayout = () => ({
+    type: SET_INLINE_FIELD_LAYOUT
+}); 
+
+export const setEditComponentFactory = () => ({
+    type: SET_EDIT_COMPONENT_FACTORY
+});
+
+export const setDetailsComponentFactory = () => ({     
+    type: SET_DETAILS_COMPONENT_FACTORY
+});
+
+export default {
+    UPDATE_FORM,
+    SET_STACKED_FIELD_LAYOUT,
+    SET_INLINE_FIELD_LAYOUT,
+    SET_EDIT_COMPONENT_FACTORY,
+    SET_DETAILS_COMPONENT_FACTORY
+}
\ No newline at end of file
diff --git a/demo/components/ButtonToolbar.js b/demo/components/ButtonToolbar.js
new file mode 100644
index 0000000..5b32619
--- /dev/null
+++ b/demo/components/ButtonToolbar.js
@@ -0,0 +1,19 @@
+import React, { Component } from 'react';
+import { ButtonToolbar, Button }from 'react-bootstrap'
+
+class Layout extends Component {
+    render() {
+
+        let { submitting } = this.props;
+
+        return (
+            <ButtonToolbar className="button-toolbar">
+                <Button className="pull-right" bsStyle="success" bsSize="large" type="submit"  disabled={submitting}>
+                    Submit
+                </Button>
+            </ButtonToolbar>
+        );
+    }
+}
+
+export default Layout;
\ No newline at end of file
diff --git a/demo/components/CodeEditor.js b/demo/components/CodeEditor.js
new file mode 100644
index 0000000..811ec82
--- /dev/null
+++ b/demo/components/CodeEditor.js
@@ -0,0 +1,20 @@
+import React, { Component } from 'react';
+import AceEditor from 'react-ace';
+
+import 'brace/mode/jsx';
+import 'brace/theme/github.js';
+
+class CodeEditor extends Component {
+    render() {
+        let { value, name, readOnly, onChange, mode, width, height } = this.props;
+        mode = mode || 'jsx';
+        width =  width || '100%';
+        
+        // metadata
+        let props = { value, name, ref: 'input', readOnly, onChange, mode, width, theme: 'github', height, fontSize: 14,  editorProps: {$blockScrolling: true} };
+
+        return <AceEditor className="code-editor" {...props}/>;
+    }
+}
+
+export default CodeEditor;
\ No newline at end of file
diff --git a/demo/components/DevTools.js b/demo/components/DevTools.js
new file mode 100644
index 0000000..a47ba28
--- /dev/null
+++ b/demo/components/DevTools.js
@@ -0,0 +1,14 @@
+import React from 'react';
+import { createDevTools } from 'redux-devtools';
+import LogMonitor from 'redux-devtools-log-monitor';
+import DockMonitor from 'redux-devtools-dock-monitor';
+
+export default createDevTools(
+  <DockMonitor
+    toggleVisibilityKey="ctrl-h"
+    changePositionKey="ctrl-q"
+    defaultIsVisible={false}
+  >
+    <LogMonitor />
+  </DockMonitor>
+);
diff --git a/demo/components/FormOptions.js b/demo/components/FormOptions.js
new file mode 100644
index 0000000..643553f
--- /dev/null
+++ b/demo/components/FormOptions.js
@@ -0,0 +1,47 @@
+import React, { Component, PropTypes } from 'react';
+import { ButtonGroup, Button, ButtonToolbar } from 'react-bootstrap'
+
+class FormOptions extends Component {
+    static propTypes = {
+        fieldLayout: PropTypes.string.isRequired,
+        setStackedFieldLayout: PropTypes.func.isRequired,
+        setInlineFieldLayout: PropTypes.func.isRequired
+    };
+    
+    render() {
+        let { fieldLayout, componentFactory, setStackedFieldLayout, setInlineFieldLayout, setEditComponentFactory, setDetailsComponentFactory, updateForm, editorSchema, schema} = this.props;
+            
+        return (
+            <ButtonToolbar className="form-options">
+                <ButtonGroup>
+                    <Button bsStyle="success" onClick={ () => updateForm(editorSchema) }>
+                        <i className="fa fa-refresh" aria-hidden="true"/> 
+                        Update
+                    </Button>
+                </ButtonGroup>
+                <ButtonGroup>
+                    <Button active={fieldLayout == 'stacked'} onClick={ () => setStackedFieldLayout() }>
+                        <i className="fa fa-ellipsis-v" aria-hidden="true"/>
+                        Stacked
+                    </Button>
+                    <Button active={fieldLayout == 'inline'} onClick={ () => setInlineFieldLayout() }>
+                        <i className="fa fa-ellipsis-h" aria-hidden="true"/> 
+                        Inline
+                    </Button>
+                </ButtonGroup>
+                <ButtonGroup>
+                    <Button active={componentFactory == 'edit'} onClick={ () => setEditComponentFactory() }>
+                        <i className="fa fa-pencil" aria-hidden="true"/> 
+                        Edit
+                    </Button>
+                    <Button active={componentFactory == 'details'} onClick={ () => setDetailsComponentFactory() }>
+                        <i className="fa fa-eye" aria-hidden="true"/>
+                        Details
+                    </Button>
+                </ButtonGroup>
+            </ButtonToolbar>
+        );
+    }
+}
+
+export default FormOptions;
\ No newline at end of file
diff --git a/demo/components/Layout.js b/demo/components/Layout.js
new file mode 100644
index 0000000..d93bea9
--- /dev/null
+++ b/demo/components/Layout.js
@@ -0,0 +1,19 @@
+import React, { Component } from 'react';
+import DevTools from './DevTools';
+
+class Layout extends Component {
+    render() {
+        let { children } = this.props;
+ 
+        return (
+            <div>
+                <div className="container-fluid">
+                    { children }
+                </div>
+                <DevTools />;
+            </div>
+        );
+    }
+}
+
+export default Layout;
\ No newline at end of file
diff --git a/demo/components/LiveSchemaEditor.js b/demo/components/LiveSchemaEditor.js
new file mode 100644
index 0000000..4d96547
--- /dev/null
+++ b/demo/components/LiveSchemaEditor.js
@@ -0,0 +1,167 @@
+import React, {Component, PropTypes} from 'react';
+import LiveSchemaEditorForm from './LiveSchemaEditorForm';
+import presets from '../presets';
+import _ from 'underscore';
+import psjon from '../../package.json';
+import { AutoForm } from 'redux-autoform';
+import { EditComponentFactory, DetailsComponentFactory } from '../../src/index';
+import { Alert, Badge } from 'react-bootstrap';
+import moment from 'moment';
+import numbro from 'numbro';
+import reactWidgetsMomentLocalizer from 'react-widgets/lib/localizers/moment';
+import momentLocalizer from 'redux-autoform-utils/lib/localization/momentLocalizer';
+import numbroLocalizer from 'redux-autoform-utils/lib/localization/numbroLocalizer';
+import ButtonToolbar from './ButtonToolbar';
+import FormOptions from './FormOptions';
+
+class LiveSchemaEditor extends Component {
+    static propTypes = {
+        preset: PropTypes.string,
+        formOptions: PropTypes.object.isRequired,
+        formOptionsActions: PropTypes.object.isRequired
+    };
+
+    getAutoFormProps(formName, initialValues) {
+        let { metaForm, formOptions } = this.props;
+
+        if (!formName) throw Error('Form name cannot be empty');
+        if (!metaForm)
+            return undefined;
+
+        let factory;
+
+        if(formOptions.componentFactory == 'edit') {
+            factory = EditComponentFactory;
+        } else {
+            factory = DetailsComponentFactory;
+        }
+
+        return {
+            form: formName,
+            fieldLayout: formOptions.fieldLayout,
+            buttonBar: ButtonToolbar,
+            schema:  eval('(' + formOptions.schema + ')') , // eval('(' + metaForm.schema.value + ')'),
+            entityName: metaForm.entityName.value,
+            layoutName: metaForm.layoutName.value,
+            componentFactory: factory,
+            errorRenderer: this.errorRenderer,
+            initialValues: initialValues,
+            onSubmit: (...args) => console.log(args)
+        };
+    }
+
+    /**
+     * Renders an exception box
+     * @param ex
+     * @returns {XML}
+     */
+    getErrorRenderer = (ex) => {
+        return (
+            <Alert bsStyle='danger'>
+                <h4>Oh snap! The configuration is not valid.</h4>
+                <p>Detailed information:
+                    <b>{ex.message}</b>
+                </p>
+            </Alert>
+        );
+    };
+
+
+    getUnderDevelopmentAlert = () => {
+        let { formOptions } = this.props;
+
+        if (formOptions.componentFactory == 'details') {
+            return (
+                <Alert bsStyle="danger">
+                    <p><b>Experimental feature</b></p>
+                    <p>Details forms are still under development. For now, it's just a lot of Static components instead of
+                        editing components. Also,
+                        it only works when the field doesn't explicitly specify the component, and it does'nt work for all types. Arrays,
+                        for instance, are still not supported.</p>
+                </Alert>
+            );
+        }
+
+        return null;
+    };
+
+    getAutoform = () => {
+        let { preset } = this.props;
+
+        preset = preset || 'default';
+
+        let presetObject = _.find(presets, p => p.name == preset);
+        let autoFormProps;
+        let autoForm;
+
+        if (!presetObject) {
+            throw Error(`Could not find preset. Preset name: ${preset}`);
+        }
+
+
+        try {
+            autoFormProps = this.getAutoFormProps(preset, presetObject.initialValues);
+            autoForm = autoFormProps ? <AutoForm {...autoFormProps}/> : null;
+        } catch (ex) {
+            autoForm = this.getErrorRenderer(ex);
+        }
+
+        return autoForm;
+    };
+
+    getPresetObject = () => {
+        let { preset } = this.props;
+
+        preset = preset || 'default';
+        return _.find(presets, p => p.name == preset);
+    };
+
+    setLocalizers = () => {
+        // setting date localizer
+        reactWidgetsMomentLocalizer(moment);
+        momentLocalizer(moment);
+
+        // setting number localizer
+        numbroLocalizer(numbro);
+    };
+
+    render() {
+        let { reduxFormActions, preset, metaForm, formOptions, formOptionsActions } = this.props;
+        this.setLocalizers();
+
+        return (
+            <div className="live-schema-editor">
+                <div className='row'>
+                    <div className="col-md-12">
+                        <h2>redux-autoform-bootstrap-ui demo {psjon.version} <Badge>Ctrl + H = Redux DevTools</Badge>
+                            <a className="pull-right" target="_blank" href="https://github.com/gearz-lab/redux-autoform"
+                                style={{color: 'black'}}>
+                                <i className="fa fa-github" aria-hidden="true"/>
+                            </a>
+                        </h2>
+                    </div>
+                    <div className="col-md-5">
+                        <LiveSchemaEditorForm formOptionActions={formOptionsActions} reduxFormActions={reduxFormActions} selectedPreset={preset} initialValues={this.getPresetObject()}/>
+                    </div>
+                    <div className="col-md-7">
+                        <div className="row">
+                            <div className="col-md-12">
+                                <FormOptions editorSchema={metaForm ? metaForm.schema.value : ''} {...formOptions} {...formOptionsActions}/>
+                                {this.getUnderDevelopmentAlert()}
+                            </div>
+                        </div>
+                        <div className="row">
+                            <div className="col-md-12">
+                                <div className="live-schema-editor-mount-node">
+                                    {this.getAutoform()}
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        )
+    }
+}
+
+export default LiveSchemaEditor;
\ No newline at end of file
diff --git a/demo/components/LiveSchemaEditorForm.js b/demo/components/LiveSchemaEditorForm.js
new file mode 100644
index 0000000..0149c97
--- /dev/null
+++ b/demo/components/LiveSchemaEditorForm.js
@@ -0,0 +1,81 @@
+import React, {Component, PropTypes} from 'react';
+import CodeEditor from './CodeEditor';
+import { FormGroup, FormControl, ControlLabel } from 'react-bootstrap';
+import { reduxForm } from 'redux-form';
+import { browserHistory } from 'react-router';
+import presets from '../presets';
+
+class LiveSchemaEditorForm extends Component {
+    onPresetChange = (event) => {
+        browserHistory.push(`/redux-autoform/demo.html?preset=${event.target.value}`);
+    };
+    
+    getOptions = () => {
+        return presets.map((item, index) => (
+            <option key={index} value={item.name}>
+                {item.displayName}
+            </option>
+        ));  
+    };
+
+    render() {
+        const { fields: {entityName, layoutName, schema}, selectedPreset, formOptionActions } = this.props;
+
+        return <div>
+            <div className='row'>
+                <div className="col-md-12">
+                    <span className="pull-right">
+                        <a target="blank" href="https://github.com/redux-autoform/redux-autoform/blob/master/docs-md/documentation.md">metadata documentation</a>
+                    </span>
+                    <FormGroup controlId="formControlsSelect">
+                        <ControlLabel>
+                            Select a <span style={{color: 'red'}}>preset</span> 
+                            <i className="fa fa-level-down" aria-hidden="true"/>
+                        </ControlLabel>
+                        <FormControl componentClass="select" placeholder="select" onChange={this.onPresetChange} value={selectedPreset}>
+                            { this.getOptions() }
+                        </FormControl>
+                    </FormGroup>
+                </div>
+            </div>
+            <div className='row'>
+                <div className="col-md-6">
+                    <FormGroup controlId="formBasicText">
+                        <ControlLabel>
+                            Entity name
+                        </ControlLabel>
+                        <FormControl type="text" value="" placeholder="Enter text" { ... entityName }/>
+                        <FormControl.Feedback />
+                    </FormGroup>
+                </div>
+                <div className="col-md-6">
+                    <FormGroup controlId="formBasicText2">
+                        <ControlLabel>
+                            Layout name
+                        </ControlLabel>
+                        <FormControl type="text" value="" placeholder="Enter text" { ...layoutName }/>
+                        <FormControl.Feedback />
+                    </FormGroup>
+                </div>
+            </div>
+            <div className="row">
+                <div className="col-md-12">
+                    <FormGroup controlId="formBasicText3">
+                        <ControlLabel>
+                            Schema
+                        </ControlLabel>
+                        <CodeEditor { ...schema} />
+                        <FormControl.Feedback />
+                    </FormGroup>
+                </div>
+            </div>
+        </div>;
+    }
+}
+
+LiveSchemaEditorForm.propTypes = {};
+
+export default reduxForm({
+    form: 'meta',
+    fields: ['entityName', 'layoutName', 'schema']
+})(LiveSchemaEditorForm);
\ No newline at end of file
diff --git a/demo/containers/App.js b/demo/containers/App.js
new file mode 100644
index 0000000..3c12f32
--- /dev/null
+++ b/demo/containers/App.js
@@ -0,0 +1,2 @@
+import Layout from '../components/Layout';
+export default Layout;
diff --git a/demo/containers/LiveSchemaEditorContainer.js b/demo/containers/LiveSchemaEditorContainer.js
new file mode 100644
index 0000000..032ac19
--- /dev/null
+++ b/demo/containers/LiveSchemaEditorContainer.js
@@ -0,0 +1,20 @@
+import {bindActionCreators} from 'redux';
+import {connect} from 'react-redux';
+import LiveSchemaEditor from '../components/LiveSchemaEditor';
+import { change, initialize } from 'redux-form';
+import { setInlineFieldLayout, setStackedFieldLayout, setEditComponentFactory, setDetailsComponentFactory, updateForm } from '../actions/formOptions';
+
+const reduxFormActions = { change, initialize };
+const formOptionsActions = { setInlineFieldLayout, setStackedFieldLayout, setEditComponentFactory, setDetailsComponentFactory, updateForm };
+
+const mapStateToProps = (state) => ({     
+    metaForm: state.form.meta,
+    formOptions: state.formOptions
+});
+
+const mapDispatchToProps = (dispatch) => ({
+    reduxFormActions: bindActionCreators(reduxFormActions, dispatch), 
+    formOptionsActions: bindActionCreators(formOptionsActions, dispatch)
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(LiveSchemaEditor);
\ No newline at end of file
diff --git a/demo/less/LiveSchemaEditor.less b/demo/less/LiveSchemaEditor.less
new file mode 100644
index 0000000..e590261
--- /dev/null
+++ b/demo/less/LiveSchemaEditor.less
@@ -0,0 +1,49 @@
+@schema-background-color: #eee;
+
+body {
+  background-color: #f7f7f7;
+}
+
+.live-schema-editor .tab-wrapper {
+  margin-top: 1em;
+}
+
+.live-schema-editor-mount-node {
+  padding: 1em;
+  border-radius: @border-radius-base;
+  background-color: white;
+  margin-bottom: 20px;
+  border: 1px solid @input-border;
+}
+
+.live-schema-editor-mount-node .meta-form-title {
+  border-bottom-color: #C5C5C5;
+}
+
+.live-schema-editor-mount-node .meta-form-title span {
+  background: @schema-background-color;
+}
+
+.color-red {
+  color: red;
+}
+
+.code-editor {
+  border: 1px solid @input-border;
+}
+
+.button-toolbar {
+  margin-top: 10px;
+}
+
+.form-options {
+  margin-bottom: 10px;
+
+  .btn-group {
+    margin-right: 5px;
+  }
+
+  .fa {
+    margin-right: 6px;
+  }
+}
\ No newline at end of file
diff --git a/demo/less/styles.less b/demo/less/styles.less
new file mode 100644
index 0000000..5c6f6fe
--- /dev/null
+++ b/demo/less/styles.less
@@ -0,0 +1,7 @@
+@import '../../node_modules/bootstrap/less/bootstrap.less';
+@import '../../node_modules/font-awesome/less/font-awesome.less';
+@import '../../node_modules/react-widgets/dist/css/react-widgets.css';
+@import '../../node_modules/react-select/dist/react-select.css';
+@import '../../src/styles/styles';
+@import '../../src/styles/styles-defaultfactories';
+@import './LiveSchemaEditor.less';
\ No newline at end of file
diff --git a/demo/lib/reduxStoreObserver.js b/demo/lib/reduxStoreObserver.js
new file mode 100644
index 0000000..a97a4f6
--- /dev/null
+++ b/demo/lib/reduxStoreObserver.js
@@ -0,0 +1,27 @@
+let currentValue;
+
+/**
+ * Observes changes in the Redux store and calls onChange when the state changes
+ * @param store The Redux store
+ * @param selector A function that should return what you are observing. Example: (state) => state.routing.locationBeforeTransitions;
+ * @param onChange A function called when the observable state changed. Params are store, previousValue and currentValue
+ */
+export default function observe(store, selector, onChange) {
+    if (!store) throw Error('\'store\' should be truthy');
+    if (!selector) throw Error('\'selector\' should be truthy');
+    
+    store.subscribe(() => {
+        let previousValue = currentValue;
+       
+        try {
+            currentValue = selector(store.getState());
+        } catch(ex) {
+            // the selector could not get the value. Maybe because of a null reference. Let's assume undefined
+            currentValue = undefined;
+        }
+        
+        if (previousValue !== currentValue) {
+            onChange(store, previousValue, currentValue);
+        }
+    });
+}
\ No newline at end of file
diff --git a/demo/pages/BasePage.html b/demo/pages/BasePage.html
new file mode 100644
index 0000000..a4e4c1c
--- /dev/null
+++ b/demo/pages/BasePage.html
@@ -0,0 +1,14 @@
+<html>
+<head>
+    <title>Redux-autoform - A library for dynamically generating React forms out of metadata </title>
+    <meta http-equiv='X-UA-Compatible' content='IE=edge' />
+    <meta name='viewport' content='width=device-width, initial-scale=1.0' />
+    <link rel='stylesheet' href='${cssBundlePath}'/>
+</head>
+<body>
+    <div>
+        <div id="#app_container"></div>
+    </div>
+    <script src='${jsBundlePath}'></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/demo/pages/Demo.js b/demo/pages/Demo.js
new file mode 100644
index 0000000..201e450
--- /dev/null
+++ b/demo/pages/Demo.js
@@ -0,0 +1,16 @@
+import React, { Component } from 'react';
+import LiveSchemaEditorContainer from '../containers/LiveSchemaEditorContainer';
+
+class LiveSchemaEditorPage extends Component {
+    render() {
+        let { location } = this.props;
+        
+        return (
+            <div>
+                <LiveSchemaEditorContainer preset={location.query.preset} />
+            </div>
+        )
+    }
+}
+
+export default LiveSchemaEditorPage;
diff --git a/demo/pages/Root.js b/demo/pages/Root.js
new file mode 100644
index 0000000..f74eb61
--- /dev/null
+++ b/demo/pages/Root.js
@@ -0,0 +1,16 @@
+import React, { Component } from 'react';
+
+class Root extends Component {
+    render() {
+        let { children } = this.props;
+        
+        return (
+            <div className="container-fluid">
+                { children }
+            </div>
+        )
+    }
+}
+
+
+export default Root;
diff --git a/demo/presets.js b/demo/presets.js
new file mode 100644
index 0000000..de27347
--- /dev/null
+++ b/demo/presets.js
@@ -0,0 +1,120 @@
+if (process.env.APP_ENV !== 'browser') {
+    require.extensions['.txt'] = function (module, filename) {
+        var fs = require('fs');
+        module.exports = fs.readFileSync(filename, 'utf8');
+    };
+}
+
+export default [
+    {
+        name: 'default',
+        displayName: 'Default',
+        entityName: 'contact',
+        layoutName: 'edit',
+        formTitle: 'Edit contact',
+        schema: require('./presets/default.txt')
+    },
+    {
+        name: 'layouts',
+        displayName: 'Layouts',
+        entityName: 'contact',
+        layoutName: 'edit',
+        schema: require('./presets/layouts.txt')
+    },
+    {
+        name: 'schemaTypeSimple',
+        displayName: 'Schema types - Simple',
+        entityName: '',
+        layoutName: '',
+        formTitle: 'Edit contact',
+        schema: require('./presets/schemaTypesSimple.txt')
+    },
+    {
+        name: 'componentsCheckbox',
+        displayName: 'Components - Checkbox',
+        entityName: '',
+        layoutName: '',
+        formTitle: 'Edit contact',
+        schema: require('./presets/ComponentsCheckbox.txt')
+    },
+    {
+        name: 'componentsDateTimePicker',
+        displayName: 'Components - DateTimePicker',
+        entityName: 'contact',
+        layoutName: '',
+        formTitle: 'Edit contact',
+        schema: require('./presets/componentsDateTimePicker.txt')
+    },
+    {
+        name: 'componentsTextBox',
+        displayName: 'Components - TextBox',
+        entityName: 'contact',
+        layoutName: '',
+        formTitle: 'Edit contact',
+        schema: require('./presets/componentsTextBox.txt')
+    },
+    {
+        name: 'componentsTextBoxInt',
+        displayName: 'Components - TextBox (int)',
+        entityName: 'contact',
+        layoutName: '',
+        formTitle: 'Edit contact',
+        schema: require('./presets/componentsTextBoxInt.txt')
+    },
+    {
+        name: 'componentsTextBoxFloat',
+        displayName: 'Components - TextBox (float)',
+        entityName: 'contact',
+        layoutName: '',
+        formTitle: 'Edit contact',
+        schema: require('./presets/componentsTextBoxFloat.txt')
+    },
+    {
+        name: 'componentsTextArea',
+        displayName: 'Components - TextArea',
+        entityName: 'contact',
+        layoutName: '',
+        formTitle: 'Edit contact',
+        schema: require('./presets/componentsTextArea.txt')
+    },
+    {
+        name: 'componentsSelect',
+        displayName: 'Components - Select',
+        entityName: 'contact',
+        layoutName: '',
+        formTitle: 'Edit contact',
+        schema: require('./presets/componentsSelect.txt')
+    },
+    {
+        name: 'componentsRadio',
+        displayName: 'Components - Radio',
+        entityName: 'contact',
+        layoutName: '',
+        formTitle: 'Edit contact',
+        schema: require('./presets/componentsRadio.txt')
+    },
+    {
+        name: 'componentsLookup',
+        displayName: 'Components - Lookup',
+        entityName: 'contact',
+        layoutName: '',
+        formTitle: 'Edit contact',
+        schema: require('./presets/componentsLookup.txt')
+    },
+    {
+        name: 'componentsArrayContainer',
+        displayName: 'Components - ArrayContainer',
+        entityName: 'contact',
+        layoutName: '',
+        formTitle: 'Edit contact',
+        schema: require('./presets/componentsArrrayContainer.txt')
+    },
+    {
+        name: 'componentsFieldGroup',
+        displayName: 'Components - FieldGroup',
+        entityName: 'contact',
+        layoutName: 'edit',
+        formTitle: 'Edit contact',
+        schema: require('./presets/componentsFieldGroup.txt')
+    }
+]
\ No newline at end of file
diff --git a/demo/presets/ComponentsCheckbox.txt b/demo/presets/ComponentsCheckbox.txt
new file mode 100644
index 0000000..50d25fe
--- /dev/null
+++ b/demo/presets/ComponentsCheckbox.txt
@@ -0,0 +1,13 @@
+{
+    default: {
+        type: "bool",
+        displayName: "Default",
+        component: "Checkbox"
+    },
+    help: {
+        type: "bool",
+        displayName: "Help",
+        help: "This is some help",
+        component: "Checkbox"
+    }
+}
\ No newline at end of file
diff --git a/demo/presets/componentsArrrayContainer.txt b/demo/presets/componentsArrrayContainer.txt
new file mode 100644
index 0000000..a99a556
--- /dev/null
+++ b/demo/presets/componentsArrrayContainer.txt
@@ -0,0 +1,49 @@
+{
+    entities: [
+        {
+            name: "contact",
+            fields: [
+                {
+                    name: "phones",
+                    type: "array",
+                    arrayType: "entity",
+                    entityType: "phone",
+                    displayName: "Phones"
+                },
+                {
+                    name: "phones2",
+                    type: "array",
+                    arrayType: "entity",
+                    entityType: "phone",
+                    displayName: "Custom size",
+                    size: 6
+                },
+                {
+                    name: "phones3",
+                    type: "array",
+                    arrayType: "entity",
+                    entityType: "phone",
+                    displayName: "Custom add text",
+                    addText: 'Add new phone'
+                }
+            ]
+        },
+        {
+            name: "phone",
+            fields: [
+                {
+                    displayName: 'Area code',
+                    name: "areaCode",
+                    type: "string",
+                    size: 3
+                },
+                {
+                    displayName: 'Number',
+                    name: "number",
+                    type: "string",
+                    size: 9
+                }
+            ]
+        }
+    ]
+}
\ No newline at end of file
diff --git a/demo/presets/componentsDateTimePicker.txt b/demo/presets/componentsDateTimePicker.txt
new file mode 100644
index 0000000..799594e
--- /dev/null
+++ b/demo/presets/componentsDateTimePicker.txt
@@ -0,0 +1,52 @@
+{
+    entities: [
+        {
+            name: "contact",
+            fields: [
+                {
+                    name: "timeOnly",
+                    displayName: "Time only",
+                    type: "time"
+                },
+                {
+                    name: "dateOnly",
+                    displayName: "Date only",
+                    type: "date"
+                },
+                {
+                    name: "dateAndTime",
+                    displayName: "Date and time",
+                    type: "datetime"
+                },
+                {
+                    name: "dateCustomFormat",
+                    displayName: "Date with custom format",
+                    type: "date",
+                    format: "DD/MM/YYYY"
+                },
+                {
+                    name: "required",
+                    displayName: "Required",
+                    type: "date",
+                    required: true
+                },
+                {
+                    name: "invalidIfBefore2016",
+                    displayName: "Invalid if before 2016",
+                    type: "date",
+                    help: "This year must be 2016 or after",
+                    error: function(m) {
+                         return m.invalidIfBefore2016 && m.invalidIfBefore2016.getFullYear() < 2016 ? 'This date should be 2016 or after' : undefined;
+                    }
+                },
+                {
+                    name: "textbox",
+                    displayName: "Using a TextBox",
+                    type: "date",
+                    component: "TextBox",
+                    help: function(m) { return m.textbox }
+                }
+            ]
+        }
+    ]
+}
\ No newline at end of file
diff --git a/demo/presets/componentsFieldGroup.txt b/demo/presets/componentsFieldGroup.txt
new file mode 100644
index 0000000..2780d01
--- /dev/null
+++ b/demo/presets/componentsFieldGroup.txt
@@ -0,0 +1,57 @@
+{
+    entities: [
+        {
+            name: "contact",
+            fields: [
+                {
+                    name: "property1",
+                    type: "string"
+                },
+                {
+                    name: "propertyGrouped1",
+                    type: "string"
+                },
+                {
+                    name: "propertyGrouped2",
+                    type: "string"
+                }
+            ],
+            layouts: [
+                {
+                    name: "edit",
+                    fields: [
+                        {
+                            name: "groupProperty",
+                            displayName: "Group property",
+                            type: "group",
+                            group: "g1"
+                        },
+                        {
+                            name: "property1",
+                            displayName: "Another property"
+                        }
+                    ],
+                    groups: [
+                        {
+                            name: "g1",
+                            fields: [
+                                {
+                                    name: "propertyGrouped1",
+                                    size: 3,
+                                    displayName: null,
+                                    type: "string",
+                                    component: "Select",
+                                    options: [
+                                        { value: 'option1', text: 'Option 1' },
+                                        { value: 'option2', text: 'Option 2' }
+                                    ]
+                                },
+                                { name: "propertyGrouped2", size: 9, displayName: null },
+                            ]
+                        }
+                    ]
+                }
+            ]
+        }
+    ]
+}
\ No newline at end of file
diff --git a/demo/presets/componentsLookup.txt b/demo/presets/componentsLookup.txt
new file mode 100644
index 0000000..62e75a9
--- /dev/null
+++ b/demo/presets/componentsLookup.txt
@@ -0,0 +1,42 @@
+{
+    entities: [
+        {
+            name: "contact",
+            fields: [
+                {
+                    name: "default",
+                    displayName: "Default",
+                    type: "string",
+                    component: "Lookup",
+                    options: [
+                        { value: 'option1', label: 'Option 1' },
+                        { value: 'option2', label: 'Option 2' },
+                    ]
+                },
+                {
+                    name: "required",
+                    displayName: "Required",
+                    type: "string",
+                    component: "Lookup",
+                    required: true,
+                    options: [
+                        { value: '', label: '' },
+                        { value: 'option1', label: 'Option 1' },
+                        { value: 'option2', label: 'Option 2' },
+                    ]
+                },
+                {
+                    name: "help",
+                    displayName: "Help",
+                    type: "string",
+                    component: "Lookup",
+                    help: "This is some help",
+                    options: [
+                        { value: 'option1', label: 'Option 1' },
+                        { value: 'option2', label: 'Option 2' },
+                    ]
+                }
+            ]
+        }
+    ]
+}
\ No newline at end of file
diff --git a/demo/presets/componentsRadio.txt b/demo/presets/componentsRadio.txt
new file mode 100644
index 0000000..034373e
--- /dev/null
+++ b/demo/presets/componentsRadio.txt
@@ -0,0 +1,41 @@
+{
+    entities: [
+        {
+            name: "contact",
+            fields: [
+                {
+                    name: "default",
+                    displayName: "Default",
+                    type: "string",
+                    component: "Radio",
+                    options: [
+                        { value: 'option1', text: 'Option 1' },
+                        { value: 'option2', text: 'Option 2' }
+                    ]
+                },
+                {
+                    name: "required",
+                    displayName: "Required",
+                    type: "string",
+                    component: "Radio",
+                    required: true,
+                    options: [
+                        { value: 'option1', text: 'Option 1' },
+                        { value: 'option2', text: 'Option 2' }
+                    ]
+                },
+                {
+                    name: "help",
+                    displayName: "Help",
+                    type: "string",
+                    component: "Radio",
+                    options: [
+                        { value: 'option1', text: 'Option 1' },
+                        { value: 'option2', text: 'Option 2' }
+                    ],
+                    help: 'This is some help'
+                }
+            ]
+        }
+    ]
+}
\ No newline at end of file
diff --git a/demo/presets/componentsSelect.txt b/demo/presets/componentsSelect.txt
new file mode 100644
index 0000000..65431e5
--- /dev/null
+++ b/demo/presets/componentsSelect.txt
@@ -0,0 +1,64 @@
+{
+    entities: [
+        {
+            name: "contact",
+            fields: [
+                {
+                    name: "default",
+                    displayName: "Default",
+                    type: "string",
+                    component: "Select",
+                    options: [
+                        { value: 'option1', text: 'Option 1' },
+                        { value: 'option2', text: 'Option 2' }
+                    ]
+                },
+                {
+                    name: "required",
+                    displayName: "Required",
+                    type: "string",
+                    component: "Select",
+                    required: true,
+                    options: [
+                        { value: '', text: '' },
+                        { value: 'option1', text: 'Option 1' },
+                        { value: 'option2', text: 'Option 2' }
+                    ]
+                },
+                {
+                    name: "addonBefore",
+                    displayName: "Addon before",
+                    type: "string",
+                    component: "Select",
+                    options: [
+                        { value: 'option1', text: 'Option 1' },
+                        { value: 'option2', text: 'Option 2' }
+                    ],
+                    addonBefore: 'This is something before'
+                },
+                {
+                    name: "addonAfter",
+                    displayName: "Addon after",
+                    type: "string",
+                    component: "Select",
+                    options: [
+                        { value: 'option1', text: 'Option 1' },
+                        { value: 'option2', text: 'Option 2' }
+                    ],
+                    addonAfter: 'This is something after'
+                },
+                {
+                    name: "help",
+                    displayName: "Help",
+                    type: "string",
+                    component: "Select",
+                    options: [
+                        { value: 'option1', text: 'Option 1' },
+                        { value: 'option2', text: 'Option 2' }
+                    ],
+                    help: 'This is some help'
+                }
+            ]
+        }
+    ]
+}
\ No newline at end of file
diff --git a/demo/presets/componentsTextArea.txt b/demo/presets/componentsTextArea.txt
new file mode 100644
index 0000000..95bbcf1
--- /dev/null
+++ b/demo/presets/componentsTextArea.txt
@@ -0,0 +1,57 @@
+{
+    entities: [
+        {
+            name: "contact",
+            fields: [
+                {
+                    name: "default",
+                    displayName: "Default",
+                    type: "string",
+                    component: "TextArea"
+                },
+                {
+                    name: "required",
+                    displayName: "Required",
+                    type: "string",
+                    component: "TextArea",
+                    required: true
+                },
+                {
+                    name: "placeholder",
+                    displayName: "Placeholder",
+                    type: "string",
+                    component: "TextArea",
+                    placeholder: "This is a place holder"
+                },
+                {
+                    name: "addonBefore",
+                    displayName: "Addon before",
+                    type: "string",
+                    addonBefore: "This is something before",
+                    component: "TextArea"
+                },
+                {
+                    name: "addonAfter",
+                    displayName: "Addon after",
+                    type: "string",
+                    addonAfter: "This is something after",
+                    component: "TextArea"
+                },
+                {
+                    name: "help",
+                    displayName: "Help",
+                    type: "string",
+                    help: "This is some help",
+                    component: "TextArea"
+                },
+                {
+                    name: "customNumberOfRows",
+                    displayName: "Custom number of rows",
+                    type: "string",
+                    rows: 10,
+                    component: "TextArea"
+                }
+            ]
+        }
+    ]
+}
\ No newline at end of file
diff --git a/demo/presets/componentsTextBox.txt b/demo/presets/componentsTextBox.txt
new file mode 100644
index 0000000..cc73b01
--- /dev/null
+++ b/demo/presets/componentsTextBox.txt
@@ -0,0 +1,44 @@
+{
+    entities: [
+        {
+            name: "contact",
+            fields: [
+                {
+                    name: "default",
+                    displayName: "Default",
+                    type: "string",
+                },
+                {
+                    name: "required",
+                    displayName: "Required",
+                    type: "string",
+                    required: true
+                },
+                {
+                    name: "placeholder",
+                    displayName: "Placeholder",
+                    type: "string",
+                    placeholder: "This is a place holder"
+                },
+                {
+                    name: "addonBefore",
+                    displayName: "Addon before",
+                    type: "string",
+                    addonBefore: "This is something before"
+                },
+                {
+                    name: "addonAfter",
+                    displayName: "Addon after",
+                    type: "string",
+                    addonAfter: "This is something after"
+                },
+                {
+                    name: "help",
+                    displayName: "Help",
+                    type: "string",
+                    help: "This is some help"
+                }
+            ]
+        }
+    ]
+}
\ No newline at end of file
diff --git a/demo/presets/componentsTextBoxFloat.txt b/demo/presets/componentsTextBoxFloat.txt
new file mode 100644
index 0000000..3a015d2
--- /dev/null
+++ b/demo/presets/componentsTextBoxFloat.txt
@@ -0,0 +1,15 @@
+{
+    entities: [
+        {
+            name: "contact",
+            fields: [
+                {
+                    name: "float",
+                    displayName: "Float",
+                    type: "float",
+                    help: function(m) { return m.float != null ? 'Double of what you typed: ' + 2 * m.float : undefined; }
+                }
+            ]
+        }
+    ]
+}
\ No newline at end of file
diff --git a/demo/presets/componentsTextBoxInt.txt b/demo/presets/componentsTextBoxInt.txt
new file mode 100644
index 0000000..0ee0234
--- /dev/null
+++ b/demo/presets/componentsTextBoxInt.txt
@@ -0,0 +1,15 @@
+{
+    entities: [
+        {
+            name: "contact",
+            fields: [
+                {
+                    name: "int",
+                    displayName: "Integer",
+                    type: "int",
+                    help: function(m) { return m.int != null ? 'Double of what you typed: ' + 2 * m.int : undefined; }
+                }
+            ]
+        }
+    ]
+}
\ No newline at end of file
diff --git a/demo/presets/default.txt b/demo/presets/default.txt
new file mode 100644
index 0000000..5a5ccb6
--- /dev/null
+++ b/demo/presets/default.txt
@@ -0,0 +1,148 @@
+{
+    entities: [
+        {
+            name: "contact",
+            fields: [
+                {
+                    name: "name",
+                    type: "string",
+                    required: true,
+                },
+                {
+                    name: "gender",
+                    type: "string",
+                    required: true,
+                },
+                {
+                    name: "emails",
+                    type: "array",
+                    arrayType: "entity",
+                    entityType: "email",
+                    layoutName: "edit",
+                    addText: "Add e-mail address",
+                    innerSize: 8
+                },
+                {
+                    name: "phones",
+                    type: "array",
+                    arrayType: "entity",
+                    entityType: "phone",
+                    layoutName: "edit",
+                    addText: "Add phone",
+                    innerSize: 8
+                }
+            ],
+            layouts: [
+                {
+                    name: "edit",
+                    groups: [
+                        {
+                            fields: [
+                                {
+                                    displayName: "Full name",
+                                    name: "name"
+                                },
+                                {
+                                    displayName: "Gender",
+                                    name: "gender",
+                                    component: "Select",
+                                    innerSize: 6,
+                                    options: [
+                                        { value: '', text: '' },
+                                        { value: 'male', text: 'Male' },
+                                        { value: 'female', text: 'Female' },
+                                    ]
+                                },
+                                {
+                                    displayName: "E-mails",
+                                    name: "emails"
+                                },
+
+                                {
+                                    displayName: "Phones",
+                                    name: "phones"
+                                }
+                            ]
+                        }
+                    ]
+                }
+            ]
+        },
+        {
+            name: "email",
+            fields: [
+                {
+                    name: "emailType",
+                    type: "string"
+                },
+                {
+                    name: "address",
+                    type: "string"
+                }
+            ],
+            layouts: [
+                {
+                    name: "edit",
+                    orientation: "horizontal",
+                    fields: [
+                        {
+                            displayName: null,
+                            name: "emailType",
+                            size: 4,
+                            component: 'Select',
+                            options: [
+                                { value: 'work', text: 'Work' },
+                                { value: 'home', text: 'Home' },
+                                { value: 'personal', text: 'Personal' },
+                                { value: 'other', text: 'Other' }
+                            ]
+                        },
+                        {
+                            displayName: null,
+                            name: "address",
+                            required: true,
+                            placeholder: 'E-mail adress',
+                            size: 8
+                        }
+
+                    ]
+                }
+            ]
+        },
+        {
+            name: "phone",
+            fields: [
+                {
+                    name: "number",
+                    type: "string"
+                },
+                {
+                    name: "longDistanceCode",
+                    type: "string"
+                }
+            ],
+            layouts: [
+                {
+                    name: "edit",
+                    orientation: "horizontal",
+                    fields: [
+                        {
+                            displayName: null,
+                            name: "longDistanceCode",
+                            size: 4,
+                            placeholder: 'Region code'
+                        },
+                        {
+                            displayName: null,
+                            name: "number",
+                            required: true,
+                            size: 8,
+                            placeholder: 'Phone number'
+                        }
+
+                    ]
+                }
+            ]
+        }
+    ]
+}
\ No newline at end of file
diff --git a/demo/presets/layouts.txt b/demo/presets/layouts.txt
new file mode 100644
index 0000000..5ef6776
--- /dev/null
+++ b/demo/presets/layouts.txt
@@ -0,0 +1,55 @@
+{
+    entities: [
+        {
+            name: "contact",
+            fields: [
+                { name: "f1", displayName: "Field 1", type: "string" },
+                { name: "f2", displayName: "Field 2", type: "string" },
+                { name: "f3", displayName: "Field 3", type: "string" },
+                { name: "f4", displayName: "Field 4", type: "string" },
+                { name: "f5", displayName: "Field 5", type: "string" },
+                { name: "f6", displayName: "Field 6", type: "string" },
+                { name: "f7", displayName: "Field 7", type: "string" },
+                { name: "f8", displayName: "Field 8", type: "string" },
+            ],
+            layouts: [
+                {
+                    name: 'edit',
+                    groups: [
+                        {
+                            title: 'Vertical layout (default)',
+                            fields: [
+                                { name: 'f1' },
+                                { name: 'f2', size: 8 }
+                            ]
+                        },
+                        {
+                            title: 'Horizontal layout',
+                            orientation: 'horizontal',
+                            fields: [
+                                { name: 'f3' },
+                                { name: 'f4' }
+                            ]
+                        },
+                        {
+                            title: 'Horizontal layout with custom sizes',
+                            orientation: 'horizontal',
+                            fields: [
+                                { name: 'f5', size: 4 },
+                                { name: 'f6', size: 8 }
+                            ]
+                        },
+                        {
+                            title: 'Horizontal layout with custom inner sizes',
+                            orientation: 'horizontal',
+                            fields: [
+                                { name: 'f7', innerSize: 3 },
+                                { name: 'f8', innerSize: 3 }
+                            ]
+                        }
+                    ]
+                }
+            ]
+        }
+    ]
+}
\ No newline at end of file
diff --git a/demo/presets/schemaTypesSimple.txt b/demo/presets/schemaTypesSimple.txt
new file mode 100644
index 0000000..2aeb5a5
--- /dev/null
+++ b/demo/presets/schemaTypesSimple.txt
@@ -0,0 +1,10 @@
+{
+    name: {
+        displayName: 'Name',
+        type: 'string'
+    },
+    dateOfBirth: {
+        displayName: 'Date of birth',
+        type: 'date'
+    }
+}
\ No newline at end of file
diff --git a/demo/reducers/formOptions.js b/demo/reducers/formOptions.js
new file mode 100644
index 0000000..ed6a09b
--- /dev/null
+++ b/demo/reducers/formOptions.js
@@ -0,0 +1,50 @@
+import clone from 'clone';
+import _ from 'underscore';
+import presets from '../presets';
+import FormActions from '../actions/formOptions';
+
+const defaultSchema = _.find(presets, p => p.name == 'default');
+const initialState = {
+    componentFactory: 'edit',
+    fieldLayout: 'stacked',
+    schema: defaultSchema.schema
+};
+
+export default function reduce(state = initialState, action) {
+    let newState;
+    
+    switch (action.type) {
+        case FormActions.UPDATE_FORM:
+            newState = clone(state);
+            newState.schema = action.schema;
+    
+            return newState;
+    
+        case FormActions.SET_STACKED_FIELD_LAYOUT:
+            newState = clone(state);
+            newState.fieldLayout = 'stacked';
+    
+            return newState;
+    
+        case FormActions.SET_INLINE_FIELD_LAYOUT:
+            newState = clone(state);
+            newState.fieldLayout = 'inline';
+    
+            return newState;
+       
+        case FormActions.SET_EDIT_COMPONENT_FACTORY:
+            newState = clone(state);
+            newState.componentFactory = 'edit';
+            
+            return newState;
+       
+        case FormActions.SET_DETAILS_COMPONENT_FACTORY:
+            newState = clone(state);
+            newState.componentFactory = 'details';
+            
+            return newState;
+        
+        default:
+            return state;
+    }
+}
\ No newline at end of file
diff --git a/demo/reducers/index.js b/demo/reducers/index.js
new file mode 100644
index 0000000..67d426d
--- /dev/null
+++ b/demo/reducers/index.js
@@ -0,0 +1,12 @@
+import { combineReducers } from 'redux';
+import { routerReducer as routing } from 'react-router-redux';
+import {reducer as formReducer} from 'redux-form';
+import formOptions from './formOptions';
+
+const rootReducer = combineReducers({
+    routing,
+    form: formReducer,
+    formOptions
+});
+
+export default rootReducer;
\ No newline at end of file
diff --git a/demo/store/configureStore.development.js b/demo/store/configureStore.development.js
new file mode 100644
index 0000000..c3d4260
--- /dev/null
+++ b/demo/store/configureStore.development.js
@@ -0,0 +1,44 @@
+import {createStore, applyMiddleware, compose} from 'redux';
+import {persistState} from 'redux-devtools';
+import thunk from 'redux-thunk';
+import {hashHistory} from 'react-router';
+import {routerMiddleware} from 'react-router-redux';
+import rootReducer from '../reducers';
+import DevTools from '../components/DevTools';
+import observe from '../lib/reduxStoreObserver';
+import { updateForm } from '../actions/formOptions';
+import presets from '../presets';
+import _ from 'underscore';
+
+const router = routerMiddleware(hashHistory);
+
+const enhancer = compose(
+    applyMiddleware(thunk, router),
+    DevTools.instrument(),
+    persistState(
+        window.location.href.match(
+            /[?&]debug_session=([^&]+)\b/
+        )
+    )
+);
+
+export default function configureStore(initialState) {
+    const store = createStore(rootReducer, initialState, enhancer);
+
+    observe(store,
+        state => state.routing.locationBeforeTransitions.query.preset,
+        (store, previousValue, currentValue) => {
+            let presetName = currentValue || 'default';
+            let preset = _.find(presets, p => p.name == presetName);
+            store.dispatch(updateForm(preset.schema));
+        }
+    );
+
+    if (module.hot) {
+        module.hot.accept('../reducers', () =>
+            store.replaceReducer(require('../reducers'))
+        );
+    }
+
+    return store;
+}
diff --git a/demo/store/configureStore.js b/demo/store/configureStore.js
new file mode 100644
index 0000000..32918c5
--- /dev/null
+++ b/demo/store/configureStore.js
@@ -0,0 +1,2 @@
+// configure store is ALWAYS in development mode because the DevTools should work on the demo
+export default from './configureStore.development';
\ No newline at end of file
diff --git a/package.json b/package.json
index 251d84d..baeab95 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,9 @@
   "description": "Bootstrap UI implementation for redux-autoform",
   "main": "./lib/index.js",
   "scripts": {
+    "build-demo": "cross-env NODE_ENV=production babel-node ./tools/build-demo.js",
     "build-lib": "cross-env NODE_ENV=production babel-node ./tools/build-lib.js",
+    "start": "cross-env NODE_ENV=development babel-node ./demo/Server.js",
     "test": "mocha ./test --compilers js:babel-register"
   },
   "repository": {
@@ -28,7 +30,7 @@
     "react": "^15.1.0",
     "react-bootstrap": "^0.30.0-rc.1",
     "react-dom": "^15.2.1",
-    "react-select": "^1.0.0-beta14",
+    "react-select": "^0.9.1",
     "react-widgets": "^3.4.2",
     "redux-autoform-utils": "^1.0.3",
     "underscore": "^1.8.3"
@@ -46,9 +48,33 @@
     "child-process-promise": "^2.0.3",
     "colors": "^1.1.2",
     "cross-env": "^2.0.0",
+    "css-loader": "^0.23.1",
+    "express": "^4.14.0",
+    "file-loader": "^0.9.0",
     "fs-extra-promise": "^0.4.0",
+    "json-loader": "^0.5.4",
+    "less": "^2.7.1",
+    "less-loader": "^2.2.3",
     "mocha": "^2.5.3",
+    "moment": "^2.14.1",
+    "npm": "^3.3.4",
+    "numbro": "^1.9.1",
     "path": "^0.12.7",
-    "rimraf-promise": "^2.0.0"
+    "phantomjs": "^2.1.7",
+    "raw-loader": "^0.5.1",
+    "react-ace": "^3.4.1",
+    "react-hot-loader": "^1.3.0",
+    "react-router": "^2.0.0",
+    "react-router-redux": "^4.0.2",
+    "redux-autoform": "^0.8.0",
+    "redux-devtools": "^3.2.0",
+    "redux-devtools-dock-monitor": "^1.1.1",
+    "redux-devtools-log-monitor": "^1.0.9",
+    "redux-thunk": "^2.1.0",
+    "rimraf-promise": "^2.0.0",
+    "style-loader": "^0.13.1",
+    "webpack": "^1.13.1",
+    "webpack-dev-middleware": "^1.6.1",
+    "webpack-hot-middleware": "^2.12.1"
   }
 }
diff --git a/tools/build-demo.js b/tools/build-demo.js
new file mode 100644
index 0000000..0810ce6
--- /dev/null
+++ b/tools/build-demo.js
@@ -0,0 +1,48 @@
+import fs from 'fs';
+import React from 'react';
+import path from 'path';
+import rimraf from 'rimraf-promise';
+import fsep from 'fs-extra-promise';
+import {exec} from 'child-process-promise';
+import {renderToString} from 'react-dom/server';
+import 'colors';
+
+require.extensions['.html'] = function (module, filename) {
+    module.exports = fs.readFileSync(filename, 'utf8');
+};
+
+const repoRoot = path.resolve(__dirname, '../');
+const demoBuiltRoot = path.join(repoRoot, 'demo-built');
+const demoBuilt = path.join(demoBuiltRoot, 'redux-autoform');
+
+const licenseSrc = path.join(repoRoot, 'LICENSE');
+const licenseDest = path.join(demoBuilt, 'LICENSE');
+
+console.log('building demo'.green);
+
+if (process.env.NODE_ENV !== 'production') {
+    console.log(`build-docs can only run in production. Current NODE_ENV: ${process.env.NODE_ENV}`.red);
+    process.exit();
+}
+
+rimraf(demoBuiltRoot)
+    .then(() => fsep.mkdir(demoBuiltRoot))
+    .then(() => fsep.mkdir(demoBuilt))
+    .then(() => {
+        console.log('writing static page files...');
+
+        let wrap = require('../demo/pages/BasePage.html')
+            .replace(/\$\{cssBundlePath\}/g, 'assets/main.css')
+            .replace(/\$\{jsBundlePath\}/g, 'assets/bundle.js');
+
+        let demoHtmlPath = path.join(demoBuilt, 'demo.html');
+        return fsep.writeFile(demoHtmlPath, wrap);
+
+    })
+    .then(() => {
+        console.log('running webpack on webpack.config.demo.prod.js...');
+        return exec(`webpack --config webpack.config.demo.prod.js`);
+    })
+    .then(() => fsep.copyAsync(licenseSrc, licenseDest))
+    .then(() => console.log('demo built'.green))
+    .catch(e=> console.log(e));
diff --git a/webpack/webpack.config.demo.dev.js b/webpack/webpack.config.demo.dev.js
new file mode 100644
index 0000000..78074e2
--- /dev/null
+++ b/webpack/webpack.config.demo.dev.js
@@ -0,0 +1,52 @@
+import webpack from 'webpack';
+
+export default {
+
+    entry: [
+        'webpack-hot-middleware/client?path=/__webpack_hmr&timeout=20000',
+        'babel-polyfill',
+        './demo/Client.js'
+    ],
+
+    output: {
+        filename: 'bundle.js',
+        path: '/',
+        publicPath: '/'
+    },
+
+    externals: undefined,
+
+    devtool: 'source-map',
+
+    resolve: {
+        extensions: ['', '.js', '.json']
+    },
+
+    module: {
+        loaders: [
+            { test: /\.js/, loaders: ['react-hot', 'babel'], exclude: /node_modules/ },
+            { test: /\.jsx/, loaders: ['react-hot', 'babel'], exclude: /node_modules/ },
+            { test: /\.css/, loader: 'style-loader!css-loader' },
+            { test: /\.less$/, loader: 'style!css!less' },
+            { test: /\.json$/, loader: 'json' },
+            { test: /\.jpe?g$|\.gif$|\.png$|\.ico$/, loader: 'file?name=[name].[ext]' },
+            { test: /\.eot|\.ttf|\.svg|\.woff2?/, loader: 'file?name=[name].[ext]' },
+            { test: /\.txt/, loader: 'raw' }
+        ]
+    },
+
+    plugins: [
+        new webpack.HotModuleReplacementPlugin(),
+        new webpack.NoErrorsPlugin(),
+        new webpack.DefinePlugin({
+            'process.env': {
+                NODE_ENV: JSON.stringify('development'),
+                APP_ENV: JSON.stringify('browser')
+            }
+        })
+    ],
+
+    stats: {
+        colors: true
+    }
+};
diff --git a/webpack/webpack.config.demo.prod.js b/webpack/webpack.config.demo.prod.js
new file mode 100644
index 0000000..d549434
--- /dev/null
+++ b/webpack/webpack.config.demo.prod.js
@@ -0,0 +1,46 @@
+import webpack from 'webpack';
+import ExtractTextPlugin from 'extract-text-webpack-plugin';
+
+export default {
+    entry: [
+        'babel-polyfill',
+        './demo/Client.js'
+    ],
+
+    output: {
+        filename: 'bundle.js',
+        path: './demo-built/redux-autoform/assets',
+        publicPath: '/redux-autoform/assets/'
+    },
+
+    externals: undefined,
+
+    resolve: {
+        extensions: ['', '.js', '.json', 'txt']
+    },
+
+    module: {
+        loaders: [
+            {test: /\.js/, loaders: ['babel'], exclude: /node_modules/ },
+            {test: /\.jsx/, loaders: ['babel'], exclude: /node_modules/ },
+            {test: /\.css/, loader: ExtractTextPlugin.extract("style-loader", "css-loader")},
+            {test: /\.less$/, loader:  ExtractTextPlugin.extract("style-loader", "css-loader!less-loader")},
+            {test: /\.json$/, loader: 'json'},
+            {test: /\.jpe?g$|\.gif$|\.png$|\.ico$/, loader: 'file?name=[name].[ext]'},
+            {test: /\.eot|\.ttf|\.svg|\.woff2?/, loader: 'file?name=[name].[ext]'},
+            {test: /\.txt/, loader: 'raw'}
+        ]
+    },
+
+    plugins: [
+        new ExtractTextPlugin('[name].css'),
+        new webpack.optimize.DedupePlugin(),
+        new webpack.optimize.UglifyJsPlugin({minimize: true}),
+        new webpack.DefinePlugin({
+            'process.env': {
+                NODE_ENV: JSON.stringify('production'),
+                APP_ENV: JSON.stringify('browser')
+            }
+        })
+    ]
+};