diff --git a/res/css/views/rooms/_SendMessageComposer.scss b/res/css/views/rooms/_SendMessageComposer.scss
index d20f7107b3..d6da1b87fa 100644
--- a/res/css/views/rooms/_SendMessageComposer.scss
+++ b/res/css/views/rooms/_SendMessageComposer.scss
@@ -30,7 +30,7 @@ limitations under the License.
         flex-direction: column;
         // min-height at this level so the mx_BasicMessageComposer_input
         // still stays vertically centered when less than 50px
-        min-height: 50px;
+        min-height: 42px;
 
         .mx_BasicMessageComposer_input {
             padding: 3px 0;
@@ -38,7 +38,7 @@ limitations under the License.
             // in it's parent vertically
             // while keeping the autocomplete at the top
             // of the composer. The parent needs to be a flex container for this to work.
-            margin: auto 0;
+            margin: auto 0 0 0;
             // max-height at this level so autocomplete doesn't get scrolled too
             max-height: 140px;
             overflow-y: auto;
@@ -49,5 +49,31 @@ limitations under the License.
         position: relative;
         height: 0;
     }
+
+    .mx_SendMessageComposer_legend {
+        height: 16px;
+        box-sizing: content-box;
+        font-size: 8px;
+        line-height: 10px;
+        padding: 0 0 2px 0;
+        color: $light-fg-color;
+        user-select: none;
+        visibility: hidden;
+
+        * {
+            display: inline-block;
+            margin: 0 10px 0 0;
+            padding: 1px;
+        }
+
+        code {
+            border-radius: 2px;
+            background-color: $focus-bg-color;
+        }
+
+        &.mx_SendMessageComposer_legend_shown {
+            visibility: visible;
+        }
+    }
 }
 
diff --git a/src/components/views/rooms/BasicMessageComposer.js b/src/components/views/rooms/BasicMessageComposer.js
index c5661e561c..9256bb9a0e 100644
--- a/src/components/views/rooms/BasicMessageComposer.js
+++ b/src/components/views/rooms/BasicMessageComposer.js
@@ -226,15 +226,21 @@ export default class BasicMessageEditor extends React.Component {
         return this.getCaret().offset === this._lastTextLength;
     }
 
-    _onBlur = () => {
+    _onBlur = (event) => {
         document.removeEventListener("selectionchange", this._onSelectionChange);
+        if (this.props.onBlur) {
+            this.props.onBlur(event);
+        }
     }
 
-    _onFocus = () => {
+    _onFocus = (event) => {
         document.addEventListener("selectionchange", this._onSelectionChange);
         // force to recalculate
         this._lastSelection = null;
         this._refreshLastCaretIfNeeded();
+        if (this.props.onFocus) {
+            this.props.onFocus(event);
+        }
     }
 
     _onSelectionChange = () => {
diff --git a/src/components/views/rooms/SendMessageComposer.js b/src/components/views/rooms/SendMessageComposer.js
index 666d2da971..4bb311dfd1 100644
--- a/src/components/views/rooms/SendMessageComposer.js
+++ b/src/components/views/rooms/SendMessageComposer.js
@@ -33,6 +33,7 @@ import sdk from '../../../index';
 import Modal from '../../../Modal';
 import { _t } from '../../../languageHandler';
 import ContentMessages from '../../../ContentMessages';
+import classNames from "classnames";
 
 function addReplyToMessageContent(content, repliedToEvent, permalinkCreator) {
     const replyContent = ReplyThread.makeReplyMixIn(repliedToEvent);
@@ -87,6 +88,7 @@ export default class SendMessageComposer extends React.Component {
 
     constructor(props, context) {
         super(props, context);
+        this.state = {};
         this.model = null;
         this._editorRef = null;
         this.currentlyComposedEditorState = null;
@@ -330,7 +332,18 @@ export default class SendMessageComposer extends React.Component {
         }
     }
 
+    _onFocus = () => {
+        this.setState({focused: true});
+    }
+
+    _onBlur = () => {
+        this.setState({focused: false});
+    }
+
     render() {
+        const legendClasses = classNames("mx_SendMessageComposer_legend", {
+            "mx_SendMessageComposer_legend_shown": this.state.focused,
+        });
         return (
             <div className="mx_SendMessageComposer" onClick={this.focusComposer} onKeyDown={this._onKeyDown}>
                 <div className="mx_SendMessageComposer_overlayWrapper">
@@ -343,7 +356,16 @@ export default class SendMessageComposer extends React.Component {
                     label={this.props.placeholder}
                     placeholder={this.props.placeholder}
                     onChange={this._saveStoredEditorState}
+                    onFocus={this._onFocus}
+                    onBlur={this._onBlur}
                 />
+                <div className={legendClasses}>
+                    <strong>**bold**</strong>
+                    <em>_italic_</em>
+                    <span>&lt;del&gt;strikethrough&lt;/del&gt;</span>
+                    <code>`code`</code>
+                    <span>&gt; quote</span>
+                </div>
             </div>
         );
     }