diff --git a/example/tray.html b/example/tray.html
new file mode 100644
index 0000000..3970007
--- /dev/null
+++ b/example/tray.html
@@ -0,0 +1,145 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>draft-extend</title>
+    <link rel="stylesheet" href="../node_modules/draft-js/dist/Draft.css" />
+    <link rel="stylesheet" href="../dist/draft-extend.css" />
+    <style>
+      #target {
+        font-family: sans-serif;
+        margin: 20px;
+        border: solid 1px #ccc;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="target"></div>
+    <script src="../node_modules/react/umd/react.development.js"></script>
+    <script src="../node_modules/create-react-class/create-react-class.js"></script>
+    <script src="../node_modules/react-dom/umd/react-dom.development.js"></script>
+    <script src="../node_modules/react-dom/umd/react-dom-server.browser.development.js"></script>
+    <script src="../node_modules/immutable/dist/immutable.min.js"></script>
+    <script src="../node_modules/es6-shim/es6-shim.js"></script>
+    <script src="../node_modules/babel-standalone/babel.min.js"></script>
+    <script src="../node_modules/draft-js/dist/Draft.js"></script>
+    <script src="../dist/draft-extend.js"></script>
+    <script src="../node_modules/draft-convert/dist/draft-convert.js"></script>
+    <script src="./ToolbarButton.js"></script>
+    <script type="text/babel">
+      const {
+        EditorState,
+        RichUtils
+      } = Draft;
+
+      const {
+        Editor,
+        createPlugin
+      } = window.DraftExtend;
+
+      const {
+        convertToHTML,
+        convertFromHTML
+      } = window.DraftConvert;
+
+      const INLINE_STYLES = [
+        {label: 'Bold', style: 'BOLD'},
+        {label: 'Italic', style: 'ITALIC'},
+        {label: 'Underline', style: 'UNDERLINE'},
+        {label: 'Code', style: 'CODE'},
+        {label: 'Strikethrough', style: 'STRIKETHROUGH'}
+      ];
+
+      const styleToHTML = (style) => {
+        if (style === 'STRIKETHROUGH') {
+          return <s />;
+        }
+        if (style === 'CODE') {
+          return <div style={{fontFamily: 'monospace'}} />;
+        }
+      };
+
+      const createInlineStyle = ({label, style}) => {
+        return ({editorState, onChange}) => {
+          const toggleStyle = () => {
+            onChange(
+              RichUtils.toggleInlineStyle(
+                editorState,
+                style
+              )
+            );
+          };
+
+          const currentInlineStyle = editorState.getCurrentInlineStyle();
+
+          const isActive = currentInlineStyle.has(style);
+
+          return (
+            <ToolbarButton
+              active={isActive}
+              label={label}
+              onClick={toggleStyle}
+            />
+          );
+        };
+      };
+
+      const InlinePlugin = createPlugin({
+        buttons: INLINE_STYLES.map(createInlineStyle),
+        styleToHTML
+      });
+
+      const WithPlugin = InlinePlugin(Editor);
+      const toHTML = InlinePlugin(convertToHTML);
+      const fromHTML = InlinePlugin(convertFromHTML);
+
+      const InlineStylesExample = createReactClass({
+        getInitialState() {
+          return {
+            editorState: EditorState.createWithContent(
+              fromHTML('<div><strong>Inline</strong> styles <em>example</em></div>')
+            )
+          };
+        },
+
+        onChange(editorState) {
+          console.log(toHTML(editorState.getCurrentContent()));
+          this.setState({editorState});
+        },
+
+        renderTray() {
+          return (
+            <div style={{
+              color: 'firebrick',
+              fontSize: 14,
+              marginBottom: 8,
+              maxWidth: 500
+            }}>
+              Arbitrary information can be displayed in a tray,
+              located between the editor body and the plugin button controls.
+              It's a good place to display validation warnings or information related to plugin data.
+            </div>
+          );
+        },
+
+        render() {
+          return (
+            <WithPlugin
+              editorState={this.state.editorState}
+              onChange={this.onChange}
+              keyCommandListeners={[Draft.RichUtils.handleKeyCommand]}
+              renderTray={this.renderTray}
+            />
+          );
+        }
+      });
+
+      ReactDOM.render(
+        <InlineStylesExample />,
+        document.getElementById('target')
+      );
+    </script>
+    <script>
+      eval(Babel.transform(document.querySelector('script[type="text/babel"]').innerText, { presets: ['es2015', 'react']}).code)
+    </script>
+  </body>
diff --git a/src/components/Editor.js b/src/components/Editor.js
index a8e627f..81762c9 100644
--- a/src/components/Editor.js
+++ b/src/components/Editor.js
@@ -1,7 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import createReactClass from 'create-react-class';
-import {List} from 'immutable';
 import {
   Editor,
   EditorState,
@@ -31,7 +30,8 @@ const propTypes = {
   onUpArrow: PropTypes.func,
   onDownArrow: PropTypes.func,
   readOnly: PropTypes.bool,
-  showButtons: PropTypes.bool
+  showButtons: PropTypes.bool,
+  renderTray: PropTypes.func,
 };
 
 const EditorWrapper = createReactClass({
@@ -50,15 +50,15 @@ const EditorWrapper = createReactClass({
     return {
       className: '',
       editorState: EditorState.createEmpty(),
-      onChange: () => {},
+      onChange: () => { },
       decorators: [],
       baseDecorator: CompositeDecorator,
       styleMap: {},
       buttons: [],
       overlays: [],
-      blockRendererFn: () => {},
-      blockStyleFn: () => {},
-      keyBindingFn: () => {},
+      blockRendererFn: () => { },
+      blockStyleFn: () => { },
+      keyBindingFn: () => { },
       readOnly: false,
       showButtons: true
     };
@@ -95,7 +95,7 @@ const EditorWrapper = createReactClass({
       }
     }
 
-    this.setState({decorator: new nextProps.baseDecorator(nextProps.decorators)});
+    this.setState({ decorator: new nextProps.baseDecorator(nextProps.decorators) });
   },
 
   keyBindingFn(e) {
@@ -154,12 +154,12 @@ const EditorWrapper = createReactClass({
   },
 
   setReadOnly(readOnly) {
-    this.setState({readOnly});
+    this.setState({ readOnly });
   },
 
   getDecoratedState() {
-    const {editorState} = this.props;
-    const {decorator} = this.state;
+    const { editorState } = this.props;
+    const { decorator } = this.state;
 
     const currentDecorator = editorState.getDecorator();
 
@@ -167,7 +167,17 @@ const EditorWrapper = createReactClass({
       return editorState;
     }
 
-    return EditorState.set(editorState, {decorator});
+    return EditorState.set(editorState, { decorator });
+  },
+
+  renderTray() {
+    const { renderTray } = this.props;
+
+    if (typeof renderTray !== 'function') {
+      return null;
+    }
+
+    return renderTray();
   },
 
   renderPluginButtons() {
@@ -258,6 +268,9 @@ const EditorWrapper = createReactClass({
             onUpArrow={this.onUpArrow}
             onDownArrow={this.onDownArrow}
           />
+          <div className="draft-extend-tray">
+            {this.renderTray()}
+          </div>
           <div className="draft-extend-controls">
             {this.renderPluginButtons()}
           </div>
