diff --git a/.gitignore b/.gitignore
index bee8a64..cf394d1 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1 +1,5 @@
 __pycache__
+*.pyc
+magic_rules/opm-faces/
+magic_rules/node_modules/
+magic_rules/static/js/*
diff --git a/magic_rules/datastore/objects.json b/magic_rules/datastore/objects.json
index 9e26dfe..64c56c8 100644
--- a/magic_rules/datastore/objects.json
+++ b/magic_rules/datastore/objects.json
@@ -1 +1,14 @@
-{}
\ No newline at end of file
+{
+    "Ruler": {
+        "type": "Ruler",
+        "Inches": null,
+        "rules": []
+    },
+    "Cat": {
+        "Color": null,
+        "Licks": null,
+        "type": "Cat",
+        "rules": [],
+        "Food preference": null
+    }
+}
\ No newline at end of file
diff --git a/magic_rules/js/calculations-creator.js b/magic_rules/js/calculations-creator.js
new file mode 100644
index 0000000..f1b0e95
--- /dev/null
+++ b/magic_rules/js/calculations-creator.js
@@ -0,0 +1,196 @@
+import React from 'react';
+
+class Operation extends React.Component {
+  constructor() {
+    super()
+  }
+  render() {
+    var i = this.props.count;
+    return (
+      <div>
+        <label htmlFor={`operator_value_${i}`}>Operator:</label>
+        <select name={`operator_value_${i}`} id={`operator_value_${i}`}>
+          <option key={`operator_value_${i}-plus`} value="+">+ (plus)</option>
+          <option key={`operator_value_${i}-minus`} value="-">- (minus)</option>
+          <option key={`operator_value_${i}-multiply`} value="*">* (multiply)</option>
+          <option key={`operator_value_${i}-divide`} value="/">/ (divide)</option>
+          <option key={`operator_value_${i}-power`} value="^">^ (to power of)</option>
+        </select>
+      </div>
+    )
+  }
+}
+
+class FormulaValue extends React.Component {
+  constructor() {
+    super()
+    this.state = {
+      type: 'static_value'
+    }
+    this.handleToggleChange = this.handleToggleChange.bind(this);
+  }
+
+  handleToggleChange(event) {
+    this.setState({ type: event.target.value });
+  }
+
+  renderStaticInput() {
+    var i = this.props.count;
+    return(
+      <div>
+        <label htmlFor={`static_value_${i}`}>Value:</label>
+        <input
+          type="text"
+          id={`static_value_${i}`}
+          name={`static_value_${i}`} />
+      </div>
+    )
+  }
+
+  renderAttrInput() {
+    let objectKeys = [];
+    for (var key in this.props.selectedObj) {
+      if (this.props.selectedObj.hasOwnProperty(key) && key != 'type' && key != 'rules'){
+        objectKeys.push(<option key={key} value={key}>{key}</option>);
+      }
+    }
+    console.log(this.props.selectedObj);
+    return (
+      <div>
+        <label>Value:</label>
+        <select>
+        { objectKeys }
+        </select>
+      </div>
+    )
+  }
+
+  render() {
+    var i = this.props.count;
+    console.log(this.props.objects);
+    return(
+      <div>
+        <fieldset className="usa-fieldset" id={i}>
+          <ul className="usa-unstyled-list">
+            <li>
+              <input
+                name={`value_type_static_${i}`}
+                type="radio"
+                value="static_value"
+                checked={this.state.type==='static_value'}
+                onChange={this.handleToggleChange} />
+              <label className="toggle" htmlFor={`value_type_static_${i}`}>Static value</label>
+            </li>
+            <li>
+              <input
+                name={`value_type_object_${i}`}
+                type="radio" value="object_value"
+                checked={this.state.type==='object_value'}
+                onChange={this.handleToggleChange} />
+              <label className="toggle" htmlFor={`value_type_object_${i}`}>Value from object</label>
+            </li>
+          </ul>
+        </fieldset>
+
+        { this.state.type === 'static_value' ? this.renderStaticInput() : this.renderAttrInput() }
+
+      </div>
+    )
+  }
+}
+
+class CalculationsCreator extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      inputs: 1, //0-based
+      operations: 0, //0-based
+      objects: [],
+      selectedObj: {}
+    }
+    this.handleAddOperation = this.handleAddOperation.bind(this);
+    this.handleObjSelect = this.handleObjSelect.bind(this);
+  }
+
+  fetchUrl(url) {
+    return fetch(url)
+      .then(response => response.json());
+  }
+
+  componentDidMount() {
+    this.fetchUrl('http://127.0.0.1:5000/api/prototypes/read')
+      .then(data => {
+        const objects = [];
+        for (var key in data) {
+          if (data.hasOwnProperty(key)){
+            objects.push(data[key]);
+          }
+        }
+        this.setState({ objects });
+      });
+  }
+
+  handleAddOperation(e){
+    e.preventDefault();
+    this.setState({
+      inputs: this.state.inputs + 1,
+      operations: this.state.operations + 1
+    });
+  }
+
+  handleObjSelect(event) {
+    let obj = this.state.objects.filter((object) => {
+                return object.type == event.target.value;
+              });
+    this.setState({ selectedObj: obj[0] });
+  }
+
+  render() {
+    var formulas = [];
+    for (var i=0; i < this.state.inputs; i++) {
+      if (i==0) {
+        formulas.push(<FormulaValue count={i} selectedObj={this.state.selectedObj} />);
+        formulas.push(<Operation count={i} />);
+        formulas.push(<FormulaValue count={i+1} selectedObj={this.state.selectedObj} />);
+      } else {
+        formulas.push(<Operation count={i} />);
+        formulas.push(<FormulaValue count={i+1} selectedObj={this.state.selectedObj} />);
+      }
+    }
+    return (
+      <form method="post" action="/prototypes/_incoming" encType="multipart/form-data" >
+        <label htmlFor="name">Calculation name:</label>
+        <input type="text" id="name" name="name" />
+        <fieldset>
+          <legend>Implemention method</legend>
+          <label htmlFor="contingent">By rule (contingent on rule):</label>
+          <select name="contingent">
+            <option value=""></option>
+            <option value="TRUE">Yes</option>
+            <option value="FALSE">No</option>
+          </select>
+          <strong>OR</strong>
+          <label htmlFor="object">Directly on prototype (always calculated):</label>
+          <select name="object"
+                  onChange={ this.handleObjSelect }>
+            <option value=""></option>
+            {this.state.objects.map((object, i) => {
+              return(
+                <option
+                  value={ object.type }
+                  selected={ this.state.selectedObj.type === object.type }
+                  key={`object_${i}`}>{object.type}</option>
+              )
+            })}
+          </select>
+        </fieldset>
+        { formulas }
+
+        <a className="usa-button usa-button-outline" onClick={ this.handleAddOperation }>Add another operation</a>
+        <button value="submit" type="submit">Save object</button>
+      </form>
+    );
+  }
+};
+
+export default CalculationsCreator;
diff --git a/magic_rules/js/calculations.js b/magic_rules/js/calculations.js
new file mode 100644
index 0000000..642af22
--- /dev/null
+++ b/magic_rules/js/calculations.js
@@ -0,0 +1,5 @@
+import CalculationsCreator from './calculations-creator';
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+ReactDOM.render(<CalculationsCreator/>, document.getElementById('js-create-calculations'));
diff --git a/magic_rules/js/object-creator.js b/magic_rules/js/object-creator.js
new file mode 100644
index 0000000..4839aba
--- /dev/null
+++ b/magic_rules/js/object-creator.js
@@ -0,0 +1,44 @@
+import React from 'react';
+
+class ObjectCreator extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      inputs: [{ 'name': 'attribute_1' }]
+    }
+    this.handleAddAttribute = this.handleAddAttribute.bind(this);
+  }
+
+  handleAddAttribute(e) {
+    e.preventDefault();
+    let newInputName = `attribute_${this.state.inputs.length}`;
+    this.setState({
+      inputs: this.state.inputs.concat([{'name': newInputName}])
+    });
+  }
+
+  render() {
+    console.log(this.state);
+    return (
+      <form method="post" action="/prototypes/_incoming" encType="multipart/form-data" >
+        <label htmlFor="name">Name:</label>
+        <input type="text" id="name" name="name" />
+        {this.state.inputs.map(function(input, i) {
+          return(
+          <div className="attribute" key={i}>
+            <label htmlFor={`attribute_${i+1}`}>Attribute:</label>
+            <input
+              type="text"
+              id={`attribute_${i+1}`}
+              name={`attribute_${i+1}`} />
+          </div>
+          )
+        })}
+        <a className="usa-button usa-button-outline" onClick={ this.handleAddAttribute }>Add another attribute</a>
+        <button value="submit" type="submit">Save object</button>
+      </form>
+    );
+  }
+};
+
+export default ObjectCreator;
diff --git a/magic_rules/js/objects.js b/magic_rules/js/objects.js
new file mode 100644
index 0000000..837ce06
--- /dev/null
+++ b/magic_rules/js/objects.js
@@ -0,0 +1,5 @@
+import ObjectCreator from './object-creator';
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+ReactDOM.render(<ObjectCreator/>, document.getElementById('js-create-object'));
diff --git a/magic_rules/js/rules-editor.js b/magic_rules/js/rules-editor.js
new file mode 100644
index 0000000..7bea046
--- /dev/null
+++ b/magic_rules/js/rules-editor.js
@@ -0,0 +1,9 @@
+import React from 'react';
+
+var RulesEditor = React.createClass({
+  render() {
+    return <h4>React form</h4>;
+  }
+});
+
+export default RulesEditor;
diff --git a/magic_rules/js/rules.js b/magic_rules/js/rules.js
new file mode 100644
index 0000000..06b83fc
--- /dev/null
+++ b/magic_rules/js/rules.js
@@ -0,0 +1,5 @@
+import RulesEditor from './rules-editor';
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+ReactDOM.render(<RulesEditor/>, document.getElementById('js-create-rules'));
diff --git a/magic_rules/package.json b/magic_rules/package.json
new file mode 100644
index 0000000..b999ea2
--- /dev/null
+++ b/magic_rules/package.json
@@ -0,0 +1,24 @@
+{
+  "name": "starter-kit",
+  "version": "1.1.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "webpack",
+    "start": "python app.py"
+  },
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "babel-core": "^6.4.5",
+    "babel-loader": "^6.2.1",
+    "babel-preset-es2015": "^6.3.13",
+    "babel-preset-react": "^6.3.13",
+    "webpack": "^1.12.12"
+  },
+  "dependencies": {
+    "react": "^0.14.7",
+    "react-dom": "^0.14.7"
+  }
+}
diff --git a/magic_rules/templates/base.html b/magic_rules/templates/base.html
index e69de29..6649b2d 100644
--- a/magic_rules/templates/base.html
+++ b/magic_rules/templates/base.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <link id="stylesheet" rel="stylesheet" href="{{ url_for('static', filename='css/uswds/css/uswds.min.css') }}">
+{% block extrahead %}
+{% endblock %}
+</head>
+<body>
+{% block body %}{% endblock %}
+{% block scripts %}{% endblock %}
+</body>
+</html>
diff --git a/magic_rules/templates/create_calculations.html b/magic_rules/templates/create_calculations.html
index 67fd80f..4434a9e 100644
--- a/magic_rules/templates/create_calculations.html
+++ b/magic_rules/templates/create_calculations.html
@@ -1,6 +1,5 @@
-<head>
-  <link id="stylesheet" rel="stylesheet" href="{{ url_for('static', filename='css/uswds/css/uswds.min.css') }}">
-</head>
+{% extends "base.html" %}
+{% block body %}
 <div class="usa-grid" style="margin-top: 5%">
   <h2>
     Rule magic!
@@ -9,88 +8,11 @@ <h2>
   <h3>
     Create calculations
   </h3>
-  <div class="usa-width-one-two-thirds">
-    <form method="post" action="/calculations/_incoming" enctype="multipart/form-data">
-      <table class="usa-table-borderless">
-        <tbody>
-          <tr>
-            <th scope="row"><strong>Calculation name:</td>
-            <td><input name="name"></td>
-          </tr>
-          <tr><td></td></tr>
-          <tr><td colspan="2"><strong>Implemention method</td></tr>
-          <tr>
-            <th scope="row">By rule (contingent on rule):</th>
-            <td>
-              <select name="contingent">
-                <option value="">
-                <option value="TRUE">Yes
-                <option value="FALSE">No
-              </select>
-            </td>
-          <tr>
-            <td><strong>OR</td>
-          </tr>
-          <tr>
-            <th scope="row">Directly on prototype (always calcuated):</td>
-            <td>
-              <select name="object">
-                <option value="">
-              {% for obj in prototypes %}
-                <option> {{obj}}
-              {% endfor %}
-              </select>
-            </td>
-          </tr>
-          <tr><td></td></tr>
-          {% for num in range(6) %}
-          <tr>
-            <th scope="row"><strong>Static value:</td>
-            <td><input name="static_value_{{ num }}"></td>
-            <td><strong>or value from attribute:</td>
-            <td>
-              <select name="attribute_value_{{ num }}">
-                <option value="">
-                {% for obj in prototypes %}
-                  {% for attribute in prototypes[obj] %} <!-- Need to limit this to just attributes on the obj selected -->
-                    {% if attribute not in ['rules', 'type'] %}
-                      <option value="__{{ attribute }}__">{{ attribute }}
-                    {% endif %}
-                  {% endfor %}
-                {% endfor %}
-              </select>
-            </td>
-          </tr>
-          {% if num != 5 %}
-          <tr>
-            <th scope="row"><strong>Operator:</th>
-            <td>
-              <select name="operator_value_{{ num }}">
-                <option value="">
-                <option value="+">+ (plus)
-                <option value="-">- (minus)
-                <option value="*">* (multiply)
-                <option value="/">/ (divide)
-                <option value="^">^ (to power of)
-              </select>
-            </td>
-          </tr>
-          {% endif %}
-            {% endfor %}
-            <tr>
-              <td>
-
-            </td>
-          </tr>
-        </tbody>
-        <tfoot>
-          <tr>
-            <th scope="row">
-              <button value="submit" type="submit">Submit</button>
-            </th>
-          </tr>
-        </tfoot>
-      </table>
-    </form>
+  <div class="usa-width-two-thirds" id="js-create-calculations">
   </div>
 </div>
+{% endblock %}
+
+{% block scripts %}
+<script src="{{ url_for('static', filename='js/calculations.js') }}"></script>
+{% endblock %}
diff --git a/magic_rules/templates/create_data.html b/magic_rules/templates/create_data.html
index ea84c15..8cad5ff 100644
--- a/magic_rules/templates/create_data.html
+++ b/magic_rules/templates/create_data.html
@@ -1,6 +1,5 @@
-<head>
-  <link id="stylesheet" rel="stylesheet" href="{{ url_for('static', filename='css/uswds/css/uswds.min.css') }}">
-</head>
+{% extends "base.html" %}
+{% block body %}
 <div class="usa-grid" style="margin-top: 5%">
   <h2>
     Rule magic!
@@ -39,3 +38,4 @@ <h3>
     {% endfor %}
   </div>
 </div>
+{% endblock %}
diff --git a/magic_rules/templates/create_prototypes.html b/magic_rules/templates/create_prototypes.html
index d4aebd9..8570069 100644
--- a/magic_rules/templates/create_prototypes.html
+++ b/magic_rules/templates/create_prototypes.html
@@ -1,6 +1,5 @@
-<head>
-  <link id="stylesheet" rel="stylesheet" href="{{ url_for('static', filename='css/uswds/css/uswds.min.css') }}">
-</head>
+{% extends "base.html" %}
+{% block body %}
 <div class="usa-grid" style="margin-top: 5%">
   <h2>
     Rule magic!
@@ -9,29 +8,12 @@ <h2>
   <h3>
       Create object prototype
   </h3>
-  <div class="usa-width-one-half">
-    <form method="post" action="/prototypes/_incoming" enctype="multipart/form-data">
-      <table class="usa-table-borderless">
-        <tbody>
-          <tr>
-            <th scope="row"><strong>Name:</th>
-            <td><input name="name"></td>
-          </tr>
-          {% for num in range(5) %}
-            <tr>
-              <th scope="row"><strong>Attribute:</th>
-              <td><input name="attribute_{{num}}"></td>
-            </tr>
-          {% endfor %}
-        </tbody>
-        <tfoot>
-          <tr>
-            <td colspan="2">
-              <button value="submit" type="submit">Submit</button>
-            </td>
-          </tr>
-        </tfoot>
-      </table>
-    </form>
+  <div class="usa-width-one-half" id="js-create-object">
   </div>
 </div>
+{% endblock %}
+
+{% block scripts %}
+<script src="{{ url_for('static', filename='js/objects.js') }}"></script>
+{% endblock %}
+
diff --git a/magic_rules/templates/create_rules.html b/magic_rules/templates/create_rules.html
index 0906bf6..81d64bf 100644
--- a/magic_rules/templates/create_rules.html
+++ b/magic_rules/templates/create_rules.html
@@ -1,6 +1,6 @@
-<head>
-  <link id="stylesheet" rel="stylesheet" href="{{ url_for('static', filename='css/uswds/css/uswds.min.css') }}">
-</head>
+{% extends "base.html" %}
+{% block body %}
+
 <div class="usa-grid" style="margin-top: 5%">
   <h2>
     Rule magic!
@@ -9,6 +9,9 @@ <h2>
   <h3>
     Create rules
   </h3>
+  <div class="usa-width-one-half" id="js-create-rules">
+  
+  </div>
   <div class="usa-width-one-half">
     <form method="post" action="/rules/_incoming" enctype="multipart/form-data">
       <table class="usa-table-borderless">
@@ -86,3 +89,4 @@ <h3>
     </form>
   </div>
 </div>
+{% endblock %}
diff --git a/magic_rules/templates/steps.html b/magic_rules/templates/steps.html
index a09143e..7a1a3d6 100644
--- a/magic_rules/templates/steps.html
+++ b/magic_rules/templates/steps.html
@@ -1,6 +1,5 @@
-<head>
-  <link id="stylesheet" rel="stylesheet" href="{{ url_for('static', filename='css/uswds/css/uswds.min.css') }}">
-</head>
+{% extends "base.html" %}
+{% block body %}
 <div class="usa-grid" style="margin-top: 5%">
   <h2>
     Rule magic!
@@ -19,3 +18,4 @@ <h2>
     <a href='/clear/data'>Clear all data</a>
   </div>
 </div>
+{% endblock %}
diff --git a/magic_rules/templates/view_data.html b/magic_rules/templates/view_data.html
index 1ff4377..874d41d 100644
--- a/magic_rules/templates/view_data.html
+++ b/magic_rules/templates/view_data.html
@@ -1,6 +1,6 @@
-<head>
-  <link id="stylesheet" rel="stylesheet" href="{{ url_for('static', filename='css/uswds/css/uswds.min.css') }}">
-</head>
+{% extends "base.html" %}
+{% block body %}
+
 <div class="usa-grid" style="margin-top: 5%">
   <h2>
     Rule magic!
@@ -27,3 +27,4 @@ <h3>
     {% endfor %}
   </div>
 </div>
+{% endblock %}
diff --git a/magic_rules/webpack.config.js b/magic_rules/webpack.config.js
new file mode 100644
index 0000000..306ab0f
--- /dev/null
+++ b/magic_rules/webpack.config.js
@@ -0,0 +1,73 @@
+var webpack = require('webpack');
+module.exports = [
+  {
+  name: 'rules',
+  entry: [
+    "./js/rules.js"
+  ],
+  output: {
+    path: __dirname + '/static/js',
+    filename: "rules.js"
+  },
+  module: {
+    loaders: [
+      {
+        test: /\.js?$/,
+        loader: 'babel-loader',
+        query: {
+          presets: ['es2015', 'react']
+        },
+        exclude: /node_modules/
+      }
+    ]
+  },
+  plugins: [
+  ]
+}, {
+  name: 'objects',
+  entry: [
+    "./js/objects.js"
+  ],
+  output: {
+    path: __dirname + '/static/js',
+    filename: "objects.js"
+  },
+  module: {
+    loaders: [
+      {
+        test: /\.js?$/,
+        loader: 'babel-loader',
+        query: {
+          presets: ['es2015', 'react']
+        },
+        exclude: /node_modules/
+      }
+    ]
+  },
+  plugins: [
+  ]
+}, {
+  name: 'calculations',
+  entry: [
+    "./js/calculations.js"
+  ],
+  output: {
+    path: __dirname + '/static/js',
+    filename: "calculations.js"
+  },
+  module: {
+    loaders: [
+      {
+        test: /\.js?$/,
+        loader: 'babel-loader',
+        query: {
+          presets: ['es2015', 'react']
+        },
+        exclude: /node_modules/
+      }
+    ]
+  },
+  plugins: [
+  ]
+}
+];