diff --git a/docs/Summary.md b/docs/Summary.md
index 8dbb803..dc58b6c 100644
--- a/docs/Summary.md
+++ b/docs/Summary.md
@@ -20,6 +20,7 @@
   * [publish(channel, param)](/docs/api/Publish.md)
   * [setHistoryLimit(limit = 200)](/docs/api/SetHistoryLimit.md)
   * [getHistory()](/docs/api/GetHistory.md)
+  * [clearHistory()](/docs/api/ClearHistory.md)
 * [Change Log](/CHANGELOG.md)
 * [Authors](/docs/Authors.md)
 * [Chat](/docs/Chat.md)
diff --git a/docs/api/ClearHistory.md b/docs/api/ClearHistory.md
new file mode 100644
index 0000000..123ec74
--- /dev/null
+++ b/docs/api/ClearHistory.md
@@ -0,0 +1,22 @@
+# `clearHistory()`
+
+Clear the history of published events.
+
+#### Example
+
+Assuming that our application has published one event, here is an example.
+
+```js
+let history = refractionInstance.getHistory();
+/* [{
+  type: 'newMessage',
+  payload: {
+    chatroom: 'refraction-chatroom',
+    sender: 'example_user',
+    message: 'Hi all!',
+  },
+}] */
+refractionInstance.clearHistory();
+history = refractionInstance.getHistory();
+/* [] */
+```
diff --git a/docs/api/GetHistory.md b/docs/api/GetHistory.md
index da7a55a..fa96319 100644
--- a/docs/api/GetHistory.md
+++ b/docs/api/GetHistory.md
@@ -1,6 +1,6 @@
 # `getHistory()`
 
-Return the history of published events.
+Returns the history of published events.
 
 #### Returns
 
diff --git a/docs/api/README.md b/docs/api/README.md
index 483253b..1c69958 100644
--- a/docs/api/README.md
+++ b/docs/api/README.md
@@ -9,6 +9,7 @@ Here is the list of methods that you can use on its instance:
 - [publish(channel, param)](/Publish.md)
 - [setHistoryLimit(limit)](/SetHistoryLimit.md)
 - [getHistory()](/GetHistory.md)
+- [clearHistory()](/ClearHistory.md)
 
 ### Importing
 
diff --git a/examples/ReactSimple/components/App.js b/examples/ReactSimple/components/App.js
index 54bf591..82b1b31 100644
--- a/examples/ReactSimple/components/App.js
+++ b/examples/ReactSimple/components/App.js
@@ -1,15 +1,24 @@
 /* eslint-disable import/no-unresolved */
 import React from 'react';
-import InputContainer from '../containers/InputContainer';
+import Label from './Label';
+import InputName from '../containers/inputs/InputName';
+import InputSurname from '../containers/inputs/InputSurname';
+import InputAddress from '../containers/inputs/InputAddress';
 import LabelContainer from '../containers/LabelContainer';
-import PlayButton from '../containers/PlayButton';
+import PlayButton from '../containers/buttons/PlayButton';
+import ClearButton from '../containers/buttons/ClearButton';
 /* eslint-enable import/no-unresolved */
 
 export default () => (
   <div>
-    <p>Write something in the input field and then Click the button</p>
-    <InputContainer />
+    <p>Write your data and click play.</p>
+    <InputName label="Name: " />
+    <InputSurname label="Surname: " />
+    <InputAddress label="Address: " />
+    <Label text="Name: " />
     <LabelContainer />
-    <PlayButton />
+    <br />
+    <PlayButton text="Play!" />
+    <ClearButton text="Clear History" />
   </div>
 );
diff --git a/examples/ReactSimple/components/Button.js b/examples/ReactSimple/components/Button.js
index f386cb2..4034544 100644
--- a/examples/ReactSimple/components/Button.js
+++ b/examples/ReactSimple/components/Button.js
@@ -9,13 +9,13 @@ export default class Button extends React.Component {
   }
 
   static defaultProps = {
-    text: 'Play!',
+    text: '',
   }
 
   render() {
     const { text, ...others } = this.props;
     return (
-      <button {...others} >{text}</button>
+      <button style={{ marginRight: '4px' }} {...others} >{text}</button>
     );
   }
 }
diff --git a/examples/ReactSimple/components/Input.js b/examples/ReactSimple/components/Input.js
index 497292b..3242bd0 100644
--- a/examples/ReactSimple/components/Input.js
+++ b/examples/ReactSimple/components/Input.js
@@ -1,11 +1,13 @@
 /* eslint-disable import/no-unresolved */
 import React from 'react';
+import Label from './Label';
 /* eslint-enable import/no-unresolved */
 
-export default class extends React.Component {
+export default class Input extends React.Component {
 
   static propTypes = {
     value: React.PropTypes.string.isRequired,
+    label: React.PropTypes.string,
   }
 
   static defaultProps = {
@@ -13,8 +15,12 @@ export default class extends React.Component {
   }
 
   render() {
+    const { label, ...others } = this.props;
     return (
-      <input {...this.props} />
+      <div>
+        <Label text={label} />
+        <input style={{ marginLeft: 8 }} {...others} />
+      </div>
     );
   }
 }
diff --git a/examples/ReactSimple/components/Label.js b/examples/ReactSimple/components/Label.js
index 028b12a..88ecfed 100644
--- a/examples/ReactSimple/components/Label.js
+++ b/examples/ReactSimple/components/Label.js
@@ -2,7 +2,7 @@
 import React from 'react';
 /* eslint-enable import/no-unresolved */
 
-export default class extends React.Component {
+export default class Label extends React.Component {
 
   static propTypes = {
     text: React.PropTypes.string.isRequired,
@@ -10,6 +10,9 @@ export default class extends React.Component {
 
   static defaultProps = {
     text: '',
+    style: {
+      display: 'inline-block',
+    },
   }
 
   render() {
diff --git a/examples/ReactSimple/containers/PlayButton.js b/examples/ReactSimple/containers/ButtonContainer.js
similarity index 78%
rename from examples/ReactSimple/containers/PlayButton.js
rename to examples/ReactSimple/containers/ButtonContainer.js
index 00fe2d4..3aeaa09 100644
--- a/examples/ReactSimple/containers/PlayButton.js
+++ b/examples/ReactSimple/containers/ButtonContainer.js
@@ -3,8 +3,8 @@ import Button from '../components/Button';
 import { connect } from 'refraction-react';
 /* eslint-enable import/no-unresolved */
 
-export default connect({
+export default (func) => connect({
   actions: {
-    onClick: 'play',
+    onClick: func,
   },
 })(Button);
diff --git a/examples/ReactSimple/containers/InputContainer.js b/examples/ReactSimple/containers/InputContainer.js
index 29349e1..0f83da8 100644
--- a/examples/ReactSimple/containers/InputContainer.js
+++ b/examples/ReactSimple/containers/InputContainer.js
@@ -3,12 +3,12 @@ import Input from '../components/Input';
 import { connect } from 'refraction-react';
 /* eslint-enable import/no-unresolved */
 
-export default connect({
+export default (changeEvent) => connect({
   actions: {
-    onChange: 'onInputChange',
+    onChange: changeEvent,
   },
   subscriptions: {
     // update his own value
-    onInputChange: ({ payload }) => ({ value: payload }),
+    [changeEvent]: ({ payload }) => ({ value: payload }),
   },
 })(Input);
diff --git a/examples/ReactSimple/containers/LabelContainer.js b/examples/ReactSimple/containers/LabelContainer.js
index eafbdb9..3d3b003 100644
--- a/examples/ReactSimple/containers/LabelContainer.js
+++ b/examples/ReactSimple/containers/LabelContainer.js
@@ -5,6 +5,6 @@ import { connect } from 'refraction-react';
 
 export default connect({
   subscriptions: {
-    onInputChange: ({ payload }) => ({ text: payload }),
+    onNameChange: ({ payload }) => ({ text: payload }),
   },
 })(Label);
diff --git a/examples/ReactSimple/containers/buttons/ClearButton.js b/examples/ReactSimple/containers/buttons/ClearButton.js
new file mode 100644
index 0000000..f7fbe35
--- /dev/null
+++ b/examples/ReactSimple/containers/buttons/ClearButton.js
@@ -0,0 +1,3 @@
+import getButtonContainer from '../ButtonContainer';
+
+export default getButtonContainer('clear');
diff --git a/examples/ReactSimple/containers/buttons/PlayButton.js b/examples/ReactSimple/containers/buttons/PlayButton.js
new file mode 100644
index 0000000..bd2cfb2
--- /dev/null
+++ b/examples/ReactSimple/containers/buttons/PlayButton.js
@@ -0,0 +1,3 @@
+import getButtonContainer from '../ButtonContainer';
+
+export default getButtonContainer('play');
diff --git a/examples/ReactSimple/containers/inputs/InputAddress.js b/examples/ReactSimple/containers/inputs/InputAddress.js
new file mode 100644
index 0000000..3db945f
--- /dev/null
+++ b/examples/ReactSimple/containers/inputs/InputAddress.js
@@ -0,0 +1,3 @@
+import getInputContainer from '../InputContainer';
+
+export default getInputContainer('onAddressChange');
diff --git a/examples/ReactSimple/containers/inputs/InputName.js b/examples/ReactSimple/containers/inputs/InputName.js
new file mode 100644
index 0000000..19dfeea
--- /dev/null
+++ b/examples/ReactSimple/containers/inputs/InputName.js
@@ -0,0 +1,3 @@
+import getInputContainer from '../InputContainer';
+
+export default getInputContainer('onNameChange');
diff --git a/examples/ReactSimple/containers/inputs/InputSurname.js b/examples/ReactSimple/containers/inputs/InputSurname.js
new file mode 100644
index 0000000..a049953
--- /dev/null
+++ b/examples/ReactSimple/containers/inputs/InputSurname.js
@@ -0,0 +1,3 @@
+import getInputContainer from '../InputContainer';
+
+export default getInputContainer('onSurnameChange');
diff --git a/examples/ReactSimple/package.json b/examples/ReactSimple/package.json
index 064ca5a..3dc863c 100644
--- a/examples/ReactSimple/package.json
+++ b/examples/ReactSimple/package.json
@@ -1,6 +1,6 @@
 {
   "name": "refraction-react-example",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Refraction example using react and player",
   "scripts": {
     "start": "node server.js",
@@ -22,7 +22,7 @@
     "react-dom": "15.1.0",
     "refraction-react": "1.0.0",
     "refraction-player": "1.0.0",
-    "refraction": "1.0.0"
+    "refraction": "1.1.0"
   },
   "devDependencies": {
     "babel-core": "6.3.15",
diff --git a/examples/ReactSimple/refraction/index.js b/examples/ReactSimple/refraction/index.js
index d66fead..9ff6db2 100644
--- a/examples/ReactSimple/refraction/index.js
+++ b/examples/ReactSimple/refraction/index.js
@@ -6,20 +6,43 @@ import play from 'refraction-player';
 
 class Refract extends Refraction {
 
-  onInputChange = (e) => {
-    this.publish('onInputChange', {
+  onNameChange = (e) => {
+    this.publishEvent(e, 'onNameChange');
+  }
+
+  onSurnameChange = (e) => {
+    this.publishEvent(e, 'onSurnameChange');
+  }
+
+  onAddressChange = (e) => {
+    this.publishEvent(e, 'onAddressChange');
+  }
+
+  publishEvent = (e, channel) => {
+    this.publish(channel, {
       type: 'event',
       payload: e,
     });
   }
 
   play = () => {
+    const track = [...this.getHistory()];
+
+    // clear fields
+    this.onNameChange('');
+    this.onSurnameChange('');
+    this.onAddressChange('');
+
     play({
       refraction: this,
-      track: this.getHistory(),
+      track,
     });
   }
 
+  clear = () => {
+    this.clearHistory();
+  }
+
 }
 
 export default new Refract(middlewares);
diff --git a/examples/RxSimple/index.html b/examples/RxSimple/index.html
index ff2af6e..706882c 100644
--- a/examples/RxSimple/index.html
+++ b/examples/RxSimple/index.html
@@ -5,10 +5,14 @@
   </head>
   <body>
     <div id="root">
-      <p>Write something in the input field and then Click the button</p>
-      <input id="input" value="" />
-      <p id="label"></p>
-      <button id="button">Play!</button>
+      <p>Write your data and click play.</p>
+      <p>Name: <input id="name" value="" /></p>
+      <p>Surname: <input id="surname" value="" /></p>
+      <p>Address: <input id="address" value="" /></p>
+      <p>Name: <span id="label"></span></p>
+      <br />
+      <button class="button" id="playButton">Play!</button>
+      <button class="button" id="clearButton">Clear History</button>
     </div>
     <script src="/static/bundle.js"></script>
   </body>
diff --git a/examples/RxSimple/index.js b/examples/RxSimple/index.js
index 4e4003d..aef8da7 100644
--- a/examples/RxSimple/index.js
+++ b/examples/RxSimple/index.js
@@ -5,23 +5,34 @@ import refraction from './refraction/';
 /* eslint-enable import/no-unresolved */
 
 (() => {
-  const input = document.getElementById('input');
-  input.onInputChange = ({ payload }) => {
-    input.value = payload;
+  const setButton = (name, action) => {
+    const button = document.getElementById(name);
+    button.onclick = refraction[action];
   };
-  refraction.subscribe(input);
+
+  const setInput = (name, subscription) => {
+    const input = document.getElementById(name);
+    input[subscription] = ({ payload }) => {
+      input.value = payload;
+    };
+    refraction.subscribe(input);
+
+    Rx.Observable
+      .fromEvent(input, 'keydown')
+      .debounce(500)
+      .subscribe(refraction[subscription]);
+  };
+
+  setInput('name', 'onNameChange');
+  setInput('surname', 'onSurnameChange');
+  setInput('address', 'onAddressChange');
+
+  setButton('playButton', 'play');
+  setButton('clearButton', 'clear');
 
   const label = document.getElementById('label');
-  label.onInputChange = ({ payload }) => {
+  label.onNameChange = ({ payload }) => {
     label.innerHTML = payload;
   };
   refraction.subscribe(label);
-
-  const button = document.getElementById('button');
-  button.onclick = refraction.play;
-
-  Rx.Observable
-    .fromEvent(input, 'keydown')
-    .debounce(500)
-    .subscribe(refraction.onInputChange);
 })();
diff --git a/examples/RxSimple/package.json b/examples/RxSimple/package.json
index 2e1221c..fbf4d26 100644
--- a/examples/RxSimple/package.json
+++ b/examples/RxSimple/package.json
@@ -1,6 +1,6 @@
 {
   "name": "refraction-rx-example",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Refraction example using Rx",
   "scripts": {
     "start": "node server.js",
@@ -19,7 +19,7 @@
   "dependencies": {
     "rx": "4.1.0",
     "refraction-player": "1.0.0",
-    "refraction": "1.0.0"
+    "refraction": "1.1.0"
   },
   "devDependencies": {
     "babel-core": "6.3.15",
diff --git a/examples/RxSimple/refraction/index.js b/examples/RxSimple/refraction/index.js
index d66fead..9ff6db2 100644
--- a/examples/RxSimple/refraction/index.js
+++ b/examples/RxSimple/refraction/index.js
@@ -6,20 +6,43 @@ import play from 'refraction-player';
 
 class Refract extends Refraction {
 
-  onInputChange = (e) => {
-    this.publish('onInputChange', {
+  onNameChange = (e) => {
+    this.publishEvent(e, 'onNameChange');
+  }
+
+  onSurnameChange = (e) => {
+    this.publishEvent(e, 'onSurnameChange');
+  }
+
+  onAddressChange = (e) => {
+    this.publishEvent(e, 'onAddressChange');
+  }
+
+  publishEvent = (e, channel) => {
+    this.publish(channel, {
       type: 'event',
       payload: e,
     });
   }
 
   play = () => {
+    const track = [...this.getHistory()];
+
+    // clear fields
+    this.onNameChange('');
+    this.onSurnameChange('');
+    this.onAddressChange('');
+
     play({
       refraction: this,
-      track: this.getHistory(),
+      track,
     });
   }
 
+  clear = () => {
+    this.clearHistory();
+  }
+
 }
 
 export default new Refract(middlewares);
diff --git a/package.json b/package.json
index 2bf8577..2832199 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "refraction",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "description": "A guard that represent central point of control in your application.",
   "main": "lib/index.js",
   "jsnext:main": "es/index.js",
diff --git a/src/index.js b/src/index.js
index 61739c3..23edfc5 100644
--- a/src/index.js
+++ b/src/index.js
@@ -50,6 +50,10 @@ export default class Refraction {
     this.history.setLimit(limit);
   }
 
+  clearHistory() {
+    this.history.clear();
+  }
+
   getHistory() {
     return this.history.get();
   }
diff --git a/test/index.spec.js b/test/index.spec.js
index 6a12799..fb4f4d8 100644
--- a/test/index.spec.js
+++ b/test/index.spec.js
@@ -110,6 +110,15 @@ describe('Refraction', () => {
     expect(refraction.history.limit).toEqual(300);
   });
 
+  it('should clear history', () => {
+    refraction.addToHistory('testChannel', { value: 'foo' });
+    let history = refraction.getHistory();
+    expect(Array.isArray(history)).toEqual(true);
+    refraction.clearHistory();
+    history = refraction.getHistory();
+    expect(history).toEqual([]);
+  });
+
   it('should get history', () => {
     global.performance = {
       now: () => 100,