diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbkeyboardshortcutsoverview.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbkeyboardshortcutsoverview.directive.js
index 127bf38f49..c5d58906a2 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbkeyboardshortcutsoverview.directive.js
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbkeyboardshortcutsoverview.directive.js
@@ -1,3 +1,110 @@
+/**
+@ngdoc directive
+@name umbraco.directives.directive:umbkeyboardShortcutsOverview
+@restrict E
+@scope
+
+@description
+
+<p>Use this directive to show an overview of keyboard shortcuts in an editor.
+The directive will render an overview trigger wich shows how the overview is opened.
+When this combination is hit an overview is opened with shortcuts based on the model sent to the directive.</p>
+
+<h3>Markup example</h3>
+<pre>
+    <div ng-controller="Umbraco.Controller as vm">
+        <umb-keyboard-shortcuts-overview
+            model="vm.keyboardShortcutsOverview">
+        </umb-keyboard-shortcuts-overview>
+    </div>
+</pre>
+
+<h3>Controller example</h3>
+<pre>
+    (function () {
+
+        "use strict";
+
+        function Controller() {
+
+            var vm = this;
+
+            vm.keyboardShortcuts = [
+                {
+                    "name": "Sections",
+                    "shortcuts": [
+                        {
+                            "description": "Navigate sections",
+                            "keys": [
+                                {"key": "1"},
+                                {"key": "4"}
+                            ],
+                            "keyRange": true
+                        }
+                    ]
+                },
+                {
+                    "name": "Design",
+                    "shortcuts": [
+                        {
+                            "description": "Add tab",
+                            "keys": [
+                                {"key": "alt"},
+                                {"key": "shift"},
+                                {"key": "t"}
+                            ]
+                        }
+                    ]
+                }
+            ];
+
+        }
+
+        angular.module("umbraco").controller("Umbraco.Controller", Controller);
+    })();
+</pre>
+
+<h3>Model description</h3>
+<ul>
+    <li>
+        <strong>name</strong>
+        <small>(string)</small> -
+        Sets the shortcut section name.
+    </li>
+    <li>
+        <strong>shortcuts</strong>
+        <small>(array)</small> -
+        Array of available shortcuts in the section.
+    </li>
+    <ul>
+        <li>
+            <strong>description</strong>
+            <small>(string)</small> -
+            Short description of the shortcut.
+        </li>
+        <li>
+            <strong>keys</strong>
+            <small>(array)</small> -
+            Array of keys in the shortcut.
+        </li>
+        <ul>
+            <li>
+                <strong>key</strong>
+                <small>(string)</small> -
+                The invidual key in the shortcut.
+            </li>
+        </ul>
+        <li>
+            <strong>keyRange</strong>
+            <small>(boolean)</small> -
+            Set to <code>true</code> to show a key range. It combines the shortcut keys with "-" instead of "+".
+        </li>
+    </ul>
+</ul>
+
+@param {object} model keyboard shortcut model. See description and example above.
+**/
+
 (function() {
   'use strict';