diff --git a/.eslintignore b/.eslintignore
index 1e263e0ef99a..93e974542d01 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -6,6 +6,9 @@ node_modules
 **/demo/**
 docs/public
 
+*.bundle.js
+*.js.map
+
 !.remarkrc.js
 !.eslintrc.js
 !.eslintrc-markdown.js
diff --git a/addons/events/CHANGELOG.md b/addons/events/CHANGELOG.md
new file mode 100644
index 000000000000..1d997b5493bc
--- /dev/null
+++ b/addons/events/CHANGELOG.md
@@ -0,0 +1,15 @@
+# ChangeLog
+
+### v1.1.0
+
+14-04-2017
+
+-   Added the ability to edit event payload
+-   Added live example
+-   Updated readme
+
+### v1.0.0
+
+13-04-2017
+
+-   Initial version
diff --git a/addons/events/LICENSE b/addons/events/LICENSE
new file mode 100644
index 000000000000..85a6c94557e5
--- /dev/null
+++ b/addons/events/LICENSE
@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2017 Kadira Inc. <hello@kadira.io>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
diff --git a/addons/events/README.md b/addons/events/README.md
new file mode 100644
index 000000000000..4b5caf589a87
--- /dev/null
+++ b/addons/events/README.md
@@ -0,0 +1,94 @@
+# Storybook Addon Events
+
+This [storybook](https://storybooks.js.org) ([source](https://github.com/storybooks/storybook)) addon allows you to add events for your stories.
+
+![Storybook Addon Events Example](docs/demo1.png)
+[Storybook Addon Events Live Demo](https://z4o4z.github.io/storybook-addon-events/index.html)
+
+### Getting Started
+
+```sh
+npm i --save-dev @storybook/addon-events
+```
+
+Then create a file called `addons.js` in your storybook config.
+
+Add following content to it:
+
+```js
+import '@storybook/addon-actions';
+import '@storybook/addon-links';
+import '@storybook/addon-events/register';
+```
+
+Then write your stories like this:
+
+```js
+import { storiesOf } from '@storybook/react';
+import WithEvents from '@storybook/addon-events';
+import EventEmiter from 'event-emiter';
+
+import Logger from './Logger';
+import * as EVENTS from './events';
+
+const emiter = new EventEmiter();
+const emit = emiter.emit.bind(emiter);
+
+
+storiesOf('WithEvents', module)
+  .addDecorator(getStory => (
+    <WithEvents
+      emit={emit}
+      events={[
+        {
+          name: EVENTS.TEST_EVENT_1,
+          title: 'Test event 1',
+          payload: 0,
+        },
+        {
+          name: EVENTS.TEST_EVENT_2,
+          title: 'Test event 2',
+          payload: 'asdasdad asdasdasd',
+        },
+        {
+          name: EVENTS.TEST_EVENT_3,
+          title: 'Test event 3',
+          payload: {
+            string: 'value',
+            number: 123,
+            array: [1, 2, 3],
+            object: {
+              string: 'value',
+              number: 123,
+              array: [1, 2, 3],
+            },
+          },
+        },
+        {
+          name: EVENTS.TEST_EVENT_4,
+          title: 'Test event 4',
+          payload: [
+            {
+              string: 'value',
+              number: 123,
+              array: [1, 2, 3],
+            },
+            {
+              string: 'value',
+              number: 123,
+              array: [1, 2, 3],
+            },
+            {
+              string: 'value',
+              number: 123,
+              array: [1, 2, 3],
+            },
+          ],
+        },
+      ]}
+    >
+      {getStory()}
+    </WithEvents>
+  ))
+  .add('Logger', () => <Logger emiter={emiter} />);
+```
diff --git a/addons/events/docs/.DS_Store b/addons/events/docs/.DS_Store
new file mode 100644
index 000000000000..817e5e65edf1
Binary files /dev/null and b/addons/events/docs/.DS_Store differ
diff --git a/addons/events/docs/demo1.png b/addons/events/docs/demo1.png
new file mode 100644
index 000000000000..e65cab4e9605
Binary files /dev/null and b/addons/events/docs/demo1.png differ
diff --git a/addons/events/package.json b/addons/events/package.json
new file mode 100644
index 000000000000..03be701ec8bb
--- /dev/null
+++ b/addons/events/package.json
@@ -0,0 +1,37 @@
+{
+  "name": "@storybook/addon-events",
+  "version": "3.0.1",
+  "description": "Add events to your Storybook stories.",
+  "keywords": [
+    "addon",
+    "events",
+    "react",
+    "storybook"
+  ],
+  "license": "MIT",
+  "main": "dist/index.js",
+  "repository": {
+    "type": "git",
+    "url": "git@github.com:storybooks/storybook.git"
+  },
+  "scripts": {
+    "build-storybook": "build-storybook",
+    "prepublish": "node ../../scripts/prepublish.js",
+    "storybook": "start-storybook -p 6006"
+  },
+  "dependencies": {
+    "@storybook/addons": "^3.0.0",
+    "babel-runtime": "^6.5.0",
+    "format-json": "^1.0.3",
+    "prop-types": "^15.5.10",
+    "react-textarea-autosize": "^4.0.5",
+    "uuid": "^3.0.1"
+  },
+  "devDependencies": {
+    "react": "^15.3.2",
+    "react-dom": "^15.3.2"
+  },
+  "peerDependencies": {
+    "react": "*"
+  }
+}
diff --git a/addons/events/register.js b/addons/events/register.js
new file mode 100644
index 000000000000..e69edbea3ed1
--- /dev/null
+++ b/addons/events/register.js
@@ -0,0 +1 @@
+require('./dist').register();
diff --git a/addons/events/src/components/Event.js b/addons/events/src/components/Event.js
new file mode 100644
index 000000000000..35c93f3d607c
--- /dev/null
+++ b/addons/events/src/components/Event.js
@@ -0,0 +1,137 @@
+import React, { Component } from 'react';
+import json from 'format-json';
+import Textarea from 'react-textarea-autosize';
+import PropTypes from 'prop-types';
+
+const styles = {
+  item: {
+    padding: '10 0',
+  },
+  buttonWrapper: {
+    textAlign: 'center',
+  },
+  button: {
+    display: 'inline-block',
+    fontFamily: `
+      -apple-system, ".SFNSText-Regular", "San Francisco", "Roboto",
+      "Segoe UI", "Helvetica Neue", "Lucida Grande", sans-serif
+    `,
+    fontSize: 14,
+    padding: 10,
+    margin: 10,
+    width: '40%',
+  },
+  textArea: {
+    display: 'block',
+    boxSizing: 'border-box',
+    margin: 0,
+    width: '100%',
+    maxWidth: '100%',
+    verticalAlign: 'middle',
+    outline: 'none',
+    border: '1px solid #c7c7c7',
+    borderRadius: 2,
+    fontSize: 13,
+    padding: '5px',
+    color: 'rgb(51, 51, 51)',
+    fontFamily: 'Arial, sans-serif',
+  },
+};
+
+export default class Item extends Component {
+  static propTypes = {
+    name: PropTypes.string.isRequired,
+    title: PropTypes.string.isRequired,
+    onEmit: PropTypes.func.isRequired,
+    payload: PropTypes.any, // eslint-disable-line react/forbid-prop-types
+  };
+
+  static defaultProps = {
+    payload: {},
+  };
+
+  static getJSONFromString(str) {
+    try {
+      return JSON.parse(str);
+    } catch (e) {
+      return str;
+    }
+  }
+
+  state = {};
+
+  componentWillMount() {
+    const payloadString = json.plain(this.props.payload);
+
+    this.setState({
+      failed: false,
+      payload: Item.getJSONFromString(payloadString),
+      payloadString,
+      isTextAreaShowed: false,
+    });
+  }
+
+  onChange = ({ target: { value } }) => {
+    const newState = {
+      payloadString: value,
+    };
+
+    try {
+      newState.payload = JSON.parse(value.trim());
+      newState.failed = false;
+    } catch (err) {
+      newState.failed = true;
+    }
+
+    this.setState(newState);
+  };
+
+  onEmitClick = () => {
+    this.props.onEmit({
+      name: this.props.name,
+      payload: this.state.payload,
+    });
+  };
+
+  onToggleEditClick = () => {
+    this.setState(({ isTextAreaShowed }) => ({
+      isTextAreaShowed: !isTextAreaShowed,
+    }));
+  };
+
+  render() {
+    const { failed, isTextAreaShowed } = this.state;
+    const extraStyle = {
+      display: isTextAreaShowed ? 'block' : 'none',
+    };
+
+    if (failed) {
+      extraStyle.border = '1px solid #fadddd';
+      extraStyle.backgroundColor = '#fff5f5';
+    }
+
+    return (
+      <div style={{ width: '100%' }}>
+        <h3>{this.props.title}</h3>
+        <div style={styles.buttonWrapper}>
+          <button style={styles.button} onClick={this.onEmitClick} disabled={failed}>
+            Emit
+          </button>
+          <button style={styles.button} onClick={this.onToggleEditClick}>
+            {isTextAreaShowed ? 'Close' : 'Edit payload'}
+          </button>
+        </div>
+
+        <Textarea
+          ref={ref => {
+            this.input = ref;
+          }}
+          style={{ ...styles.textArea, ...extraStyle }}
+          value={this.state.payloadString}
+          minRows={3}
+          onChange={this.onChange}
+        />
+      </div>
+    );
+  }
+}
diff --git a/addons/events/src/components/Panel.js b/addons/events/src/components/Panel.js
new file mode 100644
index 000000000000..3b127b7fb3c6
--- /dev/null
+++ b/addons/events/src/components/Panel.js
@@ -0,0 +1,72 @@
+import React, { Component } from 'react';
+// import addons from '@storybook/addons';
+import PropTypes from 'prop-types';
+
+import { EVENTS } from '../constants';
+
+import Event from './Event';
+
+const styles = {
+  wrapper: {
+    margin: 10,
+    fontFamily: `
+      -apple-system, ".SFNSText-Regular", "San Francisco", "Roboto",
+      "Segoe UI", "Helvetica Neue", "Lucida Grande", sans-serif
+    `,
+    fontSize: 14,
+    width: '100%',
+    color: 'rgb(51, 51, 51)',
+    overflow: 'auto',
+  },
+};
+
+export default class Events extends Component {
+  static propTypes = {
+    api: PropTypes.shape({
+      onStory: PropTypes.func,
+    }).isRequired,
+    channel: PropTypes.shape({
+      on: PropTypes.func,
+      emit: PropTypes.func,
+      removeListener: PropTypes.func,
+    }).isRequired,
+  };
+
+  state = {
+    events: [],
+  };
+
+  componentDidMount() {
+    this.props.channel.on(EVENTS.ADD, this.onAdd);
+
+    this.stopListeningOnStory = this.props.api.onStory(() => {
+      this.onAdd([]);
+    });
+  }
+
+  componentWillUnmount() {
+    if (this.stopListeningOnStory) {
+      this.stopListeningOnStory();
+    }
+
+    this.unmounted = true;
+    this.props.channel.removeListener(EVENTS.ADD, this.onAdd);
+  }
+
+  onAdd = events => {
+    this.setState({ events });
+  };
+
+  onEmit = event => {
+    this.props.channel.emit(EVENTS.EMIT, event);
+  };
+
+  render() {
+    const { events } = this.state;
+    return (
+      <div style={styles.wrapper}>
+        {events.map(event => <Event key={event.id} {...event} onEmit={this.onEmit} />)}
+      </div>
+    );
+  }
+}
diff --git a/addons/events/src/constants.js b/addons/events/src/constants.js
new file mode 100644
index 000000000000..ab77207b0339
--- /dev/null
+++ b/addons/events/src/constants.js
@@ -0,0 +1,10 @@
+export const ADDON_ID = 'storybook/addon-events';
+
+export const PANEL_ID = `${ADDON_ID}/panel`;
+
+export const EVENT_PREFIX = `${ADDON_ID}/event`;
+
+export const EVENTS = {
+  ADD: 'add',
+  EMIT: 'emit',
+};
diff --git a/addons/events/src/index.js b/addons/events/src/index.js
new file mode 100644
index 000000000000..a4dcd63b708e
--- /dev/null
+++ b/addons/events/src/index.js
@@ -0,0 +1,3 @@
+export default from './preview';
+
+export { register } from './manager';
diff --git a/addons/events/src/manager.js b/addons/events/src/manager.js
new file mode 100644
index 000000000000..1e7436f5094e
--- /dev/null
+++ b/addons/events/src/manager.js
@@ -0,0 +1,14 @@
+import React from 'react';
+import addons from '@storybook/addons';
+
+import Panel from './components/Panel';
+import { ADDON_ID, PANEL_ID } from './constants';
+
+export function register() {
+  addons.register(ADDON_ID, api => {
+    addons.addPanel(PANEL_ID, {
+      title: 'Events',
+      render: () => <Panel channel={addons.getChannel()} api={api} />,
+    });
+  });
+}
diff --git a/addons/events/src/preview.js b/addons/events/src/preview.js
new file mode 100644
index 000000000000..90afa93d8b9e
--- /dev/null
+++ b/addons/events/src/preview.js
@@ -0,0 +1,47 @@
+import { Component } from 'react';
+import addons from '@storybook/addons';
+import PropTypes from 'prop-types';
+
+import { EVENTS } from './constants';
+
+export default class WithEvents extends Component {
+  static propTypes = {
+    emit: PropTypes.func.isRequired,
+    events: PropTypes.arrayOf(
+      PropTypes.shape({
+        name: PropTypes.string,
+        title: PropTypes.string,
+        payload: PropTypes.any,
+      })
+    ).isRequired,
+    children: PropTypes.oneOfType([PropTypes.element, PropTypes.array]).isRequired,
+  };
+
+  componentDidMount() {
+    const { events } = this.props;
+
+    this.channel = addons.getChannel();
+
+    this.channel.on(EVENTS.EMIT, this.onEmit);
+
+    this.channel.emit(EVENTS.ADD, events);
+  }
+
+  componentWillReceiveProps(nextProps) {
+    const { events } = nextProps;
+
+    this.channel.emit(EVENTS.ADD, events);
+  }
+
+  componentWillUnmount() {
+    this.channel.removeListener(EVENTS.EMIT, this.onEmit);
+  }
+
+  onEmit = event => {
+    this.props.emit(event.name, event.payload);
+  };
+
+  render() {
+    return this.props.children;
+  }
+}
diff --git a/examples/cra-storybook/.storybook/addons.js b/examples/cra-storybook/.storybook/addons.js
index 6aed412d04af..09eddda4c251 100644
--- a/examples/cra-storybook/.storybook/addons.js
+++ b/examples/cra-storybook/.storybook/addons.js
@@ -1,2 +1,3 @@
 import '@storybook/addon-actions/register';
 import '@storybook/addon-links/register';
+import '@storybook/addon-events/register';
diff --git a/examples/cra-storybook/package.json b/examples/cra-storybook/package.json
index 768e19745d0a..3cd54c700771 100644
--- a/examples/cra-storybook/package.json
+++ b/examples/cra-storybook/package.json
@@ -10,14 +10,18 @@
     "test": "react-scripts test --env=jsdom"
   },
   "dependencies": {
+    "eventemitter3": "^2.0.3",
+    "format-json": "^1.0.3",
     "global": "^4.3.2",
     "prop-types": "^15.5.10",
     "react": "^15.5.4",
-    "react-dom": "^15.5.4"
+    "react-dom": "^15.5.4",
+    "uuid": "^3.0.1"
   },
   "devDependencies": {
     "@storybook/addon-actions": "3.0.0",
     "@storybook/addon-links": "3.0.0",
+    "@storybook/addon-events": "3.0.1",
     "@storybook/addons": "3.0.0",
     "@storybook/react": "3.0.0",
     "react-scripts": "1.0.1"
diff --git a/examples/cra-storybook/src/stories/Logger.js b/examples/cra-storybook/src/stories/Logger.js
new file mode 100644
index 000000000000..ac517a1f57e2
--- /dev/null
+++ b/examples/cra-storybook/src/stories/Logger.js
@@ -0,0 +1,71 @@
+import React, { Component } from 'react';
+import json from 'format-json';
+import PropTypes from 'prop-types';
+import EventEmiter from 'eventemitter3';
+
+import uuid from 'uuid/v4';
+
+const EVENTS = {
+  TEST_EVENT_1: 'test-event-1',
+  TEST_EVENT_2: 'test-event-2',
+  TEST_EVENT_3: 'test-event-3',
+  TEST_EVENT_4: 'test-event-4',
+};
+
+const styles = {
+  wrapper: {
+    padding: 20,
+    fontFamily: `
+      -apple-system, ".SFNSText-Regular", "San Francisco", "Roboto",
+      "Segoe UI", "Helvetica Neue", "Lucida Grande", sans-serif
+    `,
+    color: 'rgb(51, 51, 51)',
+  },
+  item: {
+    listStyle: 'none',
+    marginBottom: 10,
+  },
+};
+
+export default class Logger extends Component {
+  static propTypes = {
+    emiter: PropTypes.instanceOf(EventEmiter).isRequired,
+  };
+
+  state = {
+    events: [],
+  };
+
+  componentWillMount() {
+    const { emiter } = this.props;
+
+    emiter.on(EVENTS.TEST_EVENT_1, this.onEventHandler(EVENTS.TEST_EVENT_1));
+    emiter.on(EVENTS.TEST_EVENT_2, this.onEventHandler(EVENTS.TEST_EVENT_2));
+    emiter.on(EVENTS.TEST_EVENT_3, this.onEventHandler(EVENTS.TEST_EVENT_3));
+    emiter.on(EVENTS.TEST_EVENT_4, this.onEventHandler(EVENTS.TEST_EVENT_4));
+  }
+
+  onEventHandler = name => payload => {
+    this.setState(({ events }) => ({
+      events: [...events, { name, id: uuid(), payload }],
+    }));
+  };
+
+  render() {
+    const { events } = this.state;
+
+    return (
+      <div style={styles.wrapper}>
+        <h1>Logger</h1>
+        <dl>
+          {events.map(({ id, name, payload }) =>
+            <div style={styles.item} key={id}>
+              <dt><b>Event name:</b> {name}</dt>
+              <dd><b>Event payload:</b> {json.plain(payload)}</dd>
+            </div>
+          )}
+        </dl>
+      </div>
+    );
+  }
+}
diff --git a/examples/cra-storybook/src/stories/index.js b/examples/cra-storybook/src/stories/index.js
index 1d459693864b..e6344a41bb90 100644
--- a/examples/cra-storybook/src/stories/index.js
+++ b/examples/cra-storybook/src/stories/index.js
@@ -1,12 +1,26 @@
 import React from 'react';
 
+import EventEmiter from 'eventemitter3';
+
 import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 import { linkTo } from '@storybook/addon-links';
+import WithEvents from '@storybook/addon-events';
 
 import Button from './Button';
 import Welcome from './Welcome';
 import App from '../App';
+import Logger from './Logger';
+
+const EVENTS = {
+  TEST_EVENT_1: 'test-event-1',
+  TEST_EVENT_2: 'test-event-2',
+  TEST_EVENT_3: 'test-event-3',
+  TEST_EVENT_4: 'test-event-4',
+};
+
+const emiter = new EventEmiter();
+const emit = emiter.emit.bind(emiter);
 
 storiesOf('Welcome', module).add('to Storybook', () => <Welcome showApp={linkTo('Button')} />);
 
@@ -17,3 +31,60 @@ storiesOf('Button', module)
 storiesOf('App', module)
   .add('with text', () => <App />)
   .add('with some emoji', () => <Button onClick={action('clicked')}>😀 😎 👍 💯</Button>);
+
+storiesOf('WithEvents', module)
+  .addDecorator(getStory =>
+    <WithEvents
+      emit={emit}
+      events={[
+        {
+          name: EVENTS.TEST_EVENT_1,
+          title: 'Test event 1',
+          payload: 0,
+        },
+        {
+          name: EVENTS.TEST_EVENT_2,
+          title: 'Test event 2',
+          payload: 'Test event 2',
+        },
+        {
+          name: EVENTS.TEST_EVENT_3,
+          title: 'Test event 3',
+          payload: {
+            string: 'value',
+            number: 123,
+            array: [1, 2, 3],
+            object: {
+              string: 'value',
+              number: 123,
+              array: [1, 2, 3],
+            },
+          },
+        },
+        {
+          name: EVENTS.TEST_EVENT_4,
+          title: 'Test event 4',
+          payload: [
+            {
+              string: 'value',
+              number: 123,
+              array: [1, 2, 3],
+            },
+            {
+              string: 'value',
+              number: 123,
+              array: [1, 2, 3],
+            },
+            {
+              string: 'value',
+              number: 123,
+              array: [1, 2, 3],
+            },
+          ],
+        },
+      ]}
+    >
+      {getStory()}
+    </WithEvents>
+  )
+  .add('Logger', () => <Logger emiter={emiter} />);