diff --git a/templates/demo/app/components/blockchain.js b/templates/demo/app/components/blockchain.js
new file mode 100644
index 0000000000..b9e5e313c0
--- /dev/null
+++ b/templates/demo/app/components/blockchain.js
@@ -0,0 +1,91 @@
+import EmbarkJS from 'Embark/EmbarkJS';
+import SimpleStorage from 'Embark/contracts/SimpleStorage';
+import React from 'react';
+import { Form, FormGroup, FormControl, HelpBlock, Button } from 'react-bootstrap';
+ 
+class Blockchain extends React.Component {
+
+    constructor(props) {
+      super(props);
+  
+      this.state = {
+        valueSet: 10,
+        valueGet: "",
+        logs: []
+      }
+    }
+  
+    handleChange(e){
+      this.setState({valueSet: e.target.value});
+    }
+  
+    setValue(e){
+      e.preventDefault();
+  
+      var value = parseInt(this.state.valueSet, 10);
+  
+      // If web3.js 1.0 is being used
+      if (EmbarkJS.isNewWeb3()) {
+        SimpleStorage.methods.set(value).send({from: web3.eth.defaultAccount});
+        this._addToLog("SimpleStorage.methods.set(value).send({from: web3.eth.defaultAccount})");
+      } else {
+        SimpleStorage.set(value);
+        this._addToLog("#blockchain", "SimpleStorage.set(" + value + ")");
+      }
+    }
+  
+    getValue(e){
+      e.preventDefault();
+      
+      if (EmbarkJS.isNewWeb3()) {
+        SimpleStorage.methods.get().call()
+          .then(_value => this.setState({valueGet: _value}))
+        this._addToLog("SimpleStorage.methods.get(console.log)");
+      } else {
+        SimpleStorage.get()
+          .then(_value => this.setState({valueGet: _value}));
+        this._addToLog("SimpleStorage.get()");
+      }
+    }
+  
+    _addToLog(txt){
+      this.state.logs.push(txt);
+      this.setState({logs: this.state.logs});
+    }
+  
+    render(){
+      return (<React.Fragment>
+          <h3> 1. Set the value in the blockchain</h3>
+          <Form inline>
+            <FormGroup>
+              <FormControl
+                type="text"
+                defaultValue={this.state.valueSet}
+                onChange={(e) => this.handleChange(e)} />
+              <Button bsStyle="primary" onClick={(e) => this.setValue(e)}>Set Value</Button>
+              <HelpBlock>Once you set the value, the transaction will need to be mined and then the value will be updated on the blockchain.</HelpBlock>
+            </FormGroup>
+          </Form>
+          
+          <h3> 2. Get the current value</h3>
+          <Form inline>
+            <FormGroup>
+              <HelpBlock>current value is <span className="value">{this.state.valueGet}</span></HelpBlock>
+              <Button bsStyle="primary" onClick={(e) => this.getValue(e)}>Get Value</Button>
+              <HelpBlock>Click the button to get the current value. The initial value is 100.</HelpBlock>
+            </FormGroup>
+          </Form>
+          
+          <h3> 3. Contract Calls </h3>
+          <p>Javascript calls being made: </p>
+          <div className="logs">
+          {
+            this.state.logs.map((item, i) => <p key={i}>{item}</p>)
+          }
+          </div>
+      </React.Fragment>
+      );
+    }
+  }
+
+  export default Blockchain;
\ No newline at end of file
diff --git a/templates/demo/app/components/storage.js b/templates/demo/app/components/storage.js
new file mode 100644
index 0000000000..f6721453be
--- /dev/null
+++ b/templates/demo/app/components/storage.js
@@ -0,0 +1,172 @@
+import EmbarkJS from 'Embark/EmbarkJS';
+import React from 'react';
+import { Alert, Form, FormGroup, FormControl, HelpBlock, Button } from 'react-bootstrap';
+ 
+class Storage extends React.Component {
+
+    constructor(props) {
+      super(props);
+      
+      this.state = {
+          textToSave: 'hello world!',
+          generatedHash: '',
+          loadText: '',
+          storedText: '',
+          fileToUpload: null,
+          fileHash: '',
+          imageToDownload: '',
+          url: '',
+          logs: [],
+          storageError: ''
+      };
+    }
+
+    handleChange(e, name){
+        this.state[name] = e.target.value;
+        this.setState(this.state);
+    }
+
+    handleFileUpload(e){
+        this.setState({ fileToUpload: [e.target] });
+    }
+
+    addToLog(txt){
+        this.state.logs.push(txt);
+        this.setState({logs: this.state.logs});
+    }
+
+    setText(e){
+        e.preventDefault();
+        
+        EmbarkJS.Storage.saveText(this.state.textToSave)
+            .then((hash) => {
+                this.setState({
+                    generatedHash: hash,
+                    loadText: hash,
+                    storageError: ''
+                });
+                this.addToLog("EmbarkJS.Storage.saveText('" + this.state.textToSave + "').then(function(hash) { })");
+                })
+            .catch((err) => {
+                if(err){
+                    this.setState({storageError: err.message});
+                    console.log("Storage saveText Error => " + err.message);
+                }
+            });
+    }
+
+    loadHash(e){
+        e.preventDefault();
+
+        EmbarkJS.Storage.get(this.state.loadText)
+            .then((content) => {
+                this.setState({storedText: content, storageError: ''});
+                this.addToLog("EmbarkJS.Storage.get('" + this.state.loadText + "').then(function(content) { })");
+            })
+            .catch((err) => {
+                if(err){
+                    this.setState({storageError: err.message})
+                    console.log("Storage get Error => " + err.message);
+                }
+            });
+    }
+
+    uploadFile(e){
+        e.preventDefault();
+
+        EmbarkJS.Storage.uploadFile(this.state.fileToUpload)
+            .then((hash) => {
+                this.setState({
+                    fileHash: hash,
+                    imageToDownload: hash,
+                    storageError: ''
+                });
+                this.addToLog("EmbarkJS.Storage.uploadFile(this.state.fileToUpload).then(function(hash) { })");
+                })
+            .catch((err) => {
+                if(err){
+                    this.setState({storageError: err.message});
+                    console.log("Storage uploadFile Error => " + err.message);
+                }
+            });
+    }
+
+    loadFile(e){
+        let _url = EmbarkJS.Storage.getUrl(this.state.imageToDownload);
+        this.setState({url: _url})
+        this.addToLog("EmbarkJS.Storage.getUrl('" + this.state.imageToDownload + "')");
+    }
+
+    render(){
+        return <React.Fragment>
+            {
+                !this.props.enabled ?
+                <React.Fragment>
+                <Alert bsStyle="warning">The node you are using does not support IPFS. Please ensure <a href="https://github.com/ipfs/js-ipfs-api#cors" target="_blank">CORS</a> is setup for the IPFS node.</Alert>
+                </React.Fragment> : ''
+            }
+            {
+                this.state.storageError !== '' ?
+                <Alert bsStyle="danger">{this.state.storageError}</Alert>
+                : ''
+            }
+            <h3>Save text to storage</h3>
+            <Form inline>
+                <FormGroup>
+                    <FormControl
+                        type="text"
+                        defaultValue={this.state.textToSave}
+                        onChange={e => this.handleChange(e, 'textToSave')} />
+                    <Button bsStyle="primary" onClick={(e) => this.setText(e)}>Save Text</Button>
+                    <HelpBlock>generated Hash: <span className="textHash">{this.state.generatedHash}</span></HelpBlock>
+                </FormGroup>
+            </Form> 
+           
+            <h3>Load text from storage given an hash</h3>
+            <Form inline>
+                <FormGroup>
+                    <FormControl
+                        type="text"
+                        value={this.state.loadText}
+                        onChange={e => this.handleChange(e, 'loadText')} />
+                    <Button bsStyle="primary" onClick={(e) => this.loadHash(e)}>Load</Button>
+                    <HelpBlock>result: <span className="textHash">{this.state.storedText}</span></HelpBlock>
+                </FormGroup>
+            </Form>
+
+            <h3>Upload file to storage</h3>
+            <Form inline>
+                <FormGroup>
+                    <FormControl
+                        type="file"
+                        onChange={(e) => this.handleFileUpload(e)} />
+                    <Button bsStyle="primary" onClick={(e) => this.uploadFile(e)}>Upload</Button>
+                    <HelpBlock>generated hash: <span className="fileHash">{this.state.fileHash}</span></HelpBlock>
+                </FormGroup>
+            </Form>
+        
+            <h3>Get file or image from storage</h3>
+            <Form inline>
+                <FormGroup>
+                    <FormControl
+                        type="text"
+                        value={this.state.imageToDownload}
+                        onChange={e => this.handleChange(e, 'imageToDownload')} />
+                    <Button bsStyle="primary" onClick={(e) => this.loadFile(e)}>Download</Button>
+                    <HelpBlock>file available at: <span><a href={this.state.url} target="_blank">{this.state.url}</a></span></HelpBlock>
+                    <HelpBlock><img src={this.state.url} /></HelpBlock>
+                </FormGroup>
+            </Form>
+
+            <p>Javascript calls being made: </p>
+            <div className="logs">
+            <p>EmbarkJS.Storage.setProvider('ipfs',{'{'}server: 'localhost', port: '5001'{'}'})</p>
+            {
+                this.state.logs.map((item, i) => <p key={i}>{item}</p>)
+            }
+            </div>
+        </React.Fragment>;
+    }
+}
+
+export default Storage;
\ No newline at end of file
diff --git a/templates/demo/app/components/whisper.js b/templates/demo/app/components/whisper.js
new file mode 100644
index 0000000000..be78c62e0b
--- /dev/null
+++ b/templates/demo/app/components/whisper.js
@@ -0,0 +1,105 @@
+import EmbarkJS from 'Embark/EmbarkJS';
+import React from 'react';
+import { Alert, Form, FormGroup, FormControl, HelpBlock, Button } from 'react-bootstrap';
+ 
+class Whisper extends React.Component {
+
+    constructor(props) {
+      super(props);
+
+      this.state = {
+          listenTo: '',
+          channel: '',
+          message: '',
+          subscribedChannels: [],
+          messageList: [],
+          logs: []
+      }
+    }
+
+    handleChange(e, name){
+        this.state[name] = e.target.value;
+        this.setState(this.state);
+    }
+
+    sendMessage(e){
+        e.preventDefault();
+        EmbarkJS.Messages.sendMessage({topic: this.state.channel, data: this.state.message});
+        this.addToLog("EmbarkJS.Messages.sendMessage({topic: '" + this.state.channel + "', data: '" + this.state.message + "'})");
+    }
+
+    listenToChannel(e){
+        e.preventDefault();
+
+        this.state.subscribedChannels.push(`subscribed to ${this.state.listenTo} now try sending a message`);
+
+        EmbarkJS.Messages.listenTo({topic: [this.state.listenTo]})
+            .then(message => this.state.messageList.push(`channel: ${this.state.listenTo}  message: ${message}`))
+
+        this.addToLog("EmbarkJS.Messages.listenTo({topic: ['" + this.state.listenTo + "']}).then(function(message) {})");
+    }
+
+    addToLog(txt){
+        this.state.logs.push(txt);
+        this.setState({logs: this.state.logs});
+    }
+
+    render(){
+        return (
+       <React.Fragment>
+            {
+                !this.props.enabled ?
+                <React.Fragment>
+                <Alert bsStyle="warning">The node you are using does not support Whisper</Alert>
+                <Alert bsStyle="warning">The node uses an unsupported version of Whisper</Alert>
+                </React.Fragment> : ''
+            }
+            <h3>Listen To channel</h3>
+            <Form inline>
+                <FormGroup>
+                    <FormControl
+                        type="text"
+                        defaultValue={this.state.listenTo}
+                        placeholder="channel"
+                        onChange={e => this.handleChange(e, 'listenTo')} />
+                    <Button bsStyle="primary" onClick={(e) => this.listenToChannel(e)}>Start Listening</Button>
+                    <div id="subscribeList">
+                    { this.state.subscribedChannels.map((item, i) => <p key={i}>{item}</p>) }
+                    </div>
+                    <p>messages received:</p>
+                    <div id="messagesList">
+                    { this.state.messageList.map((item, i) => <p key={i}>{item}</p>) }
+                    </div>
+                </FormGroup>
+            </Form>
+
+            <h3>Send Message</h3>
+            <Form inline>
+                <FormGroup>
+                    <FormControl
+                        type="text"
+                        defaultValue={this.state.channel}
+                        placeholder="channel"
+                        onChange={e => this.handleChange(e, 'channel')} />
+                    <FormControl
+                        type="text"
+                        defaultValue={this.state.message}
+                        placeholder="message"
+                        onChange={e => this.handleChange(e, 'message')} />
+                    <Button bsStyle="primary" onClick={(e) => this.sendMessage(e)}>Send Message</Button>
+                </FormGroup>
+            </Form>
+
+            <p>Javascript calls being made: </p>
+            <div className="logs">
+            <p>EmbarkJS.Messages.setProvider('whisper')</p>
+            {
+                this.state.logs.map((item, i) => <p key={i}>{item}</p>)
+            }
+            </div>
+        </React.Fragment>
+        );
+    }
+}
+
+export default Whisper;
diff --git a/templates/demo/app/dapp.css b/templates/demo/app/dapp.css
index e0043e37b4..3d355697a9 100644
--- a/templates/demo/app/dapp.css
+++ b/templates/demo/app/dapp.css
@@ -47,3 +47,7 @@ div {
   -webkit-border-radius: 10px;
   border-radius: 10px;
 }
+
+input.form-control {
+  margin-right: 5px;
+}
\ No newline at end of file
diff --git a/templates/demo/app/dapp.js b/templates/demo/app/dapp.js
index a815d5fa83..5c5f121aad 100644
--- a/templates/demo/app/dapp.js
+++ b/templates/demo/app/dapp.js
@@ -1,161 +1,75 @@
-/*globals $, SimpleStorage, document*/
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { Tabs, Tab } from 'react-bootstrap';
 
-import $ from 'jquery';
-import 'bootstrap';
-import 'bootstrap/dist/css/bootstrap.min.css';
 import EmbarkJS from 'Embark/EmbarkJS';
-import SimpleStorage from 'Embark/contracts/SimpleStorage';
+import Blockchain from './components/blockchain';
+import Whisper from './components/whisper';
+import Storage from './components/storage';
 
 import './dapp.css';
 
-var addToLog = function(id, txt) {
-  $(id + " .logs").append("<br>" + txt);
-};
+class App extends React.Component {
 
-// ===========================
-// Blockchain example
-// ===========================
-$(document).ready(function() {
+  constructor(props) {
+    super(props);
 
-  $("#blockchain button.set").click(function() {
-    var value = parseInt($("#blockchain input.text").val(), 10);
-
-    // If web3.js 1.0 is being used
-    if (EmbarkJS.isNewWeb3()) {
-      SimpleStorage.methods.set(value).send({from: web3.eth.defaultAccount});
-      addToLog("#blockchain", "SimpleStorage.methods.set(value).send({from: web3.eth.defaultAccount})");
-    } else {
-      SimpleStorage.set(value);
-      addToLog("#blockchain", "SimpleStorage.set(" + value + ")");
+    this.state = {
+      whisperEnabled: false,
+      storageEnabled: false
     }
+  }
 
-  });
-
-  $("#blockchain button.get").click(function() {
-    // If web3.js 1.0 is being used
-    if (EmbarkJS.isNewWeb3()) {
-      SimpleStorage.methods.get().call(function(err, value) {
-        $("#blockchain .value").html(value);
-      });
-      addToLog("#blockchain", "SimpleStorage.methods.get(console.log)");
-    } else {
-      SimpleStorage.get().then(function(value) {
-        $("#blockchain .value").html(value.toNumber());
-      });
-      addToLog("#blockchain", "SimpleStorage.get()");
-    }
-  });
-
-});
-
-// ===========================
-// Storage (IPFS) example
-// ===========================
-$(document).ready(function() {
-  // automatic set if config/storage.json has "enabled": true and "provider": "ipfs"
-  //EmbarkJS.Storage.setProvider('ipfs',{server: 'localhost', port: '5001'});
-
-  $("#storage .error").hide();
-  //EmbarkJS.Storage.ipfsConnection.version()
-  //  .then(function(){
-        $("#status-storage").addClass('status-online');
-        $("#storage-controls").show();
-   // })
-   // .catch(function(err) {
-   //   if(err){
-   //     console.log("IPFS Connection Error => " + err.message);
-   //     $("#storage .error").show();
-   //     $("#status-storage").addClass('status-offline');
-   //     $("#storage-controls").hide();
-   //   }
-   // });
-
-  $("#storage button.setIpfsText").click(function() {
-    var value = $("#storage input.ipfsText").val();
-    EmbarkJS.Storage.saveText(value).then(function(hash) {
-      $("span.textHash").html(hash);
-      $("input.textHash").val(hash);
-      addToLog("#storage", "EmbarkJS.Storage.saveText('" + value + "').then(function(hash) { })");
-    })
-    .catch(function(err) {
-      if(err){
-        console.log("IPFS saveText Error => " + err.message);
-      }
-    });
-  });
-
-  $("#storage button.loadIpfsHash").click(function() {
-    var value = $("#storage input.textHash").val();
-    EmbarkJS.Storage.get(value).then(function(content) {
-      $("span.ipfsText").html(content);
-      addToLog("#storage", "EmbarkJS.Storage.get('" + value + "').then(function(content) { })");
-    })
-    .catch(function(err) {
-      if(err){
-        console.log("IPFS get Error => " + err.message);
+  componentDidMount(){ 
+    __embarkContext.execWhenReady(() => {
+      if (EmbarkJS.isNewWeb3()) {
+        EmbarkJS.Messages.Providers.whisper.getWhisperVersion((err, version) => { 
+          if(!err)
+              this.setState({whisperEnabled: true})
+            else
+              console.log(err);
+        });
+      } else {
+        if (EmbarkJS.Messages.providerName === 'whisper') {
+          EmbarkJS.Messages.getWhisperVersion((err, version) => {
+            if(!err)
+              this.setState({whisperEnabled: true})
+            else
+              console.log(err);
+          });
+        }
       }
-    });
-  });
 
-  $("#storage button.uploadFile").click(function() {
-    var input = $("#storage input[type=file]");
-    EmbarkJS.Storage.uploadFile(input).then(function(hash) {
-      $("span.fileIpfsHash").html(hash);
-      $("input.fileIpfsHash").val(hash);
-      addToLog("#storage", "EmbarkJS.Storage.uploadFile($('input[type=file]')).then(function(hash) { })");
-    })
-    .catch(function(err) {
-      if(err){
-        console.log("IPFS uploadFile Error => " + err.message);
-      }
+      this.setState({
+        storageEnabled: true
+      });
     });
-  });
-
-  $("#storage button.loadIpfsFile").click(function() {
-    var hash = $("#storage input.fileIpfsHash").val();
-    var url = EmbarkJS.Storage.getUrl(hash);
-    var link = '<a href="' + url + '" target="_blank">' + url + '</a>';
-    $("span.ipfsFileUrl").html(link);
-    $(".ipfsImage").attr('src', url);
-    addToLog("#storage", "EmbarkJS.Storage.getUrl('" + hash + "')");
-  });
-
-});
+  }
 
-// ===========================
-// Communication (Whisper) example
-// ===========================
-$(document).ready(function() {
 
-  $("#communication .error").hide();
-  $("#communication .errorVersion").hide();
-  if (EmbarkJS.Messages.providerName === 'whisper') {
-    EmbarkJS.Messages.getWhisperVersion(function(err, version) {
-      if (err) {
-        $("#communication .error").show();
-        $("#communication-controls").hide();
-        $("#status-communication").addClass('status-offline');
-      } else {
-        EmbarkJS.Messages.setProvider('whisper');
-        $("#status-communication").addClass('status-online');
-      }
-    });
+  _renderStatus(title, available){
+    let className = available ? 'pull-right status-online' : 'pull-right status-offline';
+    return <React.Fragment>
+      {title} 
+      <span className={className}></span>
+    </React.Fragment>;
   }
 
-  $("#communication button.listenToChannel").click(function() {
-    var channel = $("#communication .listen input.channel").val();
-    $("#communication #subscribeList").append("<br> subscribed to " + channel + " now try sending a message");
-    EmbarkJS.Messages.listenTo({topic: [channel]}).then(function(message) {
-      $("#communication #messagesList").append("<br> channel: " + channel + " message: " + message);
-    });
-    addToLog("#communication", "EmbarkJS.Messages.listenTo({topic: ['" + channel + "']}).then(function(message) {})");
-  });
-
-  $("#communication button.sendMessage").click(function() {
-    var channel = $("#communication .send input.channel").val();
-    var message = $("#communication .send input.message").val();
-    EmbarkJS.Messages.sendMessage({topic: channel, data: message});
-    addToLog("#communication", "EmbarkJS.Messages.sendMessage({topic: '" + channel + "', data: '" + message + "'})");
-  });
+  render(){
+    return (<div><h3>Embark - Usage Example</h3>
+      <Tabs defaultActiveKey={1} id="uncontrolled-tab-example">
+        <Tab eventKey={1} title="Blockchain">
+          <Blockchain />
+        </Tab>
+        <Tab eventKey={2} title={this._renderStatus('Decentralized Storage', this.state.storageEnabled)}>
+          <Storage enabled={this.state.storageEnabled} />
+        </Tab>
+        <Tab eventKey={3} title={this._renderStatus('P2P communication (Whisper/Orbit)', this.state.whisperEnabled)}>
+          <Whisper enabled={this.state.whisperEnabled} />
+        </Tab>
+      </Tabs>
+    </div>);
+  }
+}
 
-});
+ReactDOM.render(<App></App>, document.getElementById('app'));
diff --git a/templates/demo/app/index.html b/templates/demo/app/index.html
index 0b17e193a6..55521af61d 100644
--- a/templates/demo/app/index.html
+++ b/templates/demo/app/index.html
@@ -1,107 +1,12 @@
 <html>
   <head>
     <title>Embark - SimpleStorage Demo</title>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js"></script>
-    <script src="js/dapp.js"></script>
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
   </head>
   <body class="container">
-    <h3>Embark - Usage Example</h3>
-
-    <ul class="nav nav-tabs" role="tablist" id="myTabs">
-      <li role="presentation" class="active"><a href="#blockchain" aria-controls="blockchain" role="tab" data-toggle="tab">Blockchain</a></li>
-      <li role="presentation"><a href="#storage" aria-controls="storage" role="tab" data-toggle="tab">Decentralized Storage (IPFS)<span class="pull-right" id="status-storage"></a></li>
-      <li role="presentation"><a href="#communication" aria-controls="communication" role="tab" data-toggle="tab">P2P communication (Whisper/Orbit)<span class="pull-right" id="status-communication"></span></a></li>
-    </ul>
-
-    <div class="tab-content">
-      <div role="tabpanel" class="tab-pane active" id="blockchain">
-        <h3> 1. Set the value in the blockchain</h3>
-        <div class="form-group form-inline">
-          <input type="text" class="text form-control" value="10">
-          <button class="set btn btn-primary">Set Value</button>
-          <p>Once you set the value, the transaction will need to be mined and then the value will be updated on the blockchain.</p>
-        </div>
-
-        <h3> 2. Get the current value</h3>
-        <div class="form-group">
-          <div>
-            current value is <span class="value"></span>
-          </div>
-          <button class="get btn btn-primary">Get Value</button>
-          <p>Click the button to get the current value. The initial value is 100.</p>
-        </div>
-
-        <h3> 3. Contract Calls </h3>
-        <p>Javascript calls being made: </p>
-        <div class="logs">
-        </div>
+      <div id="app">
       </div>
-      <div role="tabpanel" class="tab-pane" id="storage">
-        <div class="error alert alert-danger" role="alert">The node you are using does not support IPFS. Please ensure <a href="https://github.com/ipfs/js-ipfs-api#cors" target="_blank">CORS</a> is setup for the IPFS node.</div>
-        <div id="storage-controls">
-
-        <h3>Save text to IPFS</h3>
-        <div class="form-group form-inline">
-          <input type="text" class="ipfsText text form-control" value="hello world!">
-          <button class="setIpfsText btn btn-primary">Save</button>
-          <p>generated Hash: <span class="textHash"></span></p>
-        </div>
-
-        <h3>Load text from IPFS given an hash</h3>
-        <div class="form-group form-inline">
-          <input type="text" class="textHash text form-control" size="60">
-          <button class="loadIpfsHash set btn btn-primary">Load</button>
-          <p>result: <span class="ipfsText"></span></p>
-        </div>
-
-        <h3>upload file to ipfs</h3>
-        <div class="form-group form-inline">
-          <input type="file" class="form-control">
-          <button class="uploadFile set btn btn-primary">upload</button>
-          <p>generated hash: <span class="fileIpfsHash"></span></p>
-        </div>
-
-        <h3>Get file or image from ipfs</h3>
-        <div class="form-group form-inline">
-          <input type="text" class="fileIpfsHash form-control" size="60">
-          <button class="loadIpfsFile set btn btn-primary">Load</button>
-          <p>file available at: <span class="ipfsFileUrl"></span></p>
-          <p><img class="ipfsImage" src=""></p>
-        </div>
-
-        <p>Javascript calls being made: </p>
-        <div class="logs">
-          <br> EmbarkJS.Storage.setProvider('ipfs',{server: 'localhost', port: '5001'})
-        </div>
-      </div>
-      </div>
-      <div role="tabpanel" class="tab-pane" id="communication">
-        <div class="error alert alert-danger" role="alert">The node you are using does not support Whisper</div>
-        <div class="errorVersion alert alert-danger" role="alert">The node uses an unsupported version of Whisper</div>
-        <div id="communication-controls">
-        <h3>Listen To channel</h3>
-        <div class="form-group form-inline listen">
-          <input type="text" class="channel text form-control" placeholder="channel">
-          <button class="listenToChannel set btn btn-primary">Start Listening</button>
-          <div id="subscribeList"></div>
-          <p>messages received:<p>
-          <div id="messagesList"></div>
-        </div>
-
-        <h3>Send Message</h3>
-        <div class="form-group form-inline send">
-          <input type="text" class="channel text form-control" placeholder="channel">
-          <input type="text" class="message text form-control" placeholder="message">
-          <button class="sendMessage set btn btn-primary">Send Message</button>
-        </div>
-
-        <p>Javascript calls being made: </p>
-        <div class="logs">
-          <br> EmbarkJS.Messages.setProvider('whisper')
-        </div>
-      </div>
-      </div>
-    </div>
-
+      <script src="js/dapp.js"></script>
   </body>
 </html>
diff --git a/templates/demo/package.json b/templates/demo/package.json
index c3224ae9ed..c60b71434e 100644
--- a/templates/demo/package.json
+++ b/templates/demo/package.json
@@ -9,8 +9,9 @@
   "author": "",
   "license": "ISC",
   "homepage": "",
-  "devDependencies": {
-    "bootstrap": "^3.3.6",
-    "jquery": "^1.11.3"
+  "dependencies": {
+    "react": "^16.3.2",
+    "react-bootstrap": "^0.32.1",
+    "react-dom": "^16.3.2"
   }
 }