diff --git a/docs/api/canvas.md b/docs/api/canvas.md
index 6945c35fd..eda709a0a 100644
--- a/docs/api/canvas.md
+++ b/docs/api/canvas.md
@@ -12,12 +12,29 @@ const editor = grapesjs.init({
 })
 ```
 
-Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance
+Once the editor is instantiated you can use its API and listen to its events. Before using these methods, you should get the module from the instance.
 
 ```js
+// Listen to events
+editor.on('canvas:drop', () => { ... });
+
+// Use the API
 const canvas = editor.Canvas;
+canvas.setCoords(...);
 ```
 
+## Available Events
+
+*   `canvas:dragenter` - When something is dragged inside the canvas, `DataTransfer` instance passed as an argument
+*   `canvas:dragover` - When something is dragging on canvas, `DataTransfer` instance passed as an argument
+*   `canvas:drop` - Something is dropped in canvas, `DataTransfer` instance and the dropped model are passed as arguments
+*   `canvas:dragend` - When a drag operation is ended, `DataTransfer` instance passed as an argument
+*   `canvas:dragdata` - On any dataTransfer parse, `DataTransfer` instance and the `result` are passed as arguments.
+
+By changing `result.content` you're able to customize what is dropped
+
+## Methods
+
 *   [getConfig][2]
 *   [getElement][3]
 *   [getFrameEl][4]
diff --git a/docs/api/commands.md b/docs/api/commands.md
index ed080b3f0..5ec980581 100644
--- a/docs/api/commands.md
+++ b/docs/api/commands.md
@@ -12,12 +12,28 @@ const editor = grapesjs.init({
 })
 ```
 
-Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance
+Once the editor is instantiated you can use its API and listen to its events. Before using these methods, you should get the module from the instance.
 
 ```js
+// Listen to events
+editor.on('run', () => { ... });
+
+// Use the API
 const commands = editor.Commands;
+commands.add(...);
 ```
 
+*   ## Available Events
+*   `run:{commandName}` - Triggered when some command is called to run (eg. editor.runCommand('preview'))
+*   `stop:{commandName}` - Triggered when some command is called to stop (eg. editor.stopCommand('preview'))
+*   `run:{commandName}:before` - Triggered before the command is called
+*   `stop:{commandName}:before` - Triggered before the command is called to stop
+*   `abort:{commandName}` - Triggered when the command execution is aborted (`editor.on(`run:preview:before`, opts => opts.abort = 1);`)
+*   `run` - Triggered on run of any command. The id and the result are passed as arguments to the callback
+*   `stop` - Triggered on stop of any command. The id and the result are passed as arguments to the callback
+
+## Methods
+
 *   [add][2]
 *   [get][3]
 *   [getAll][4]
diff --git a/docs/api/components.md b/docs/api/components.md
index 80622ff9b..c8e348fe8 100644
--- a/docs/api/components.md
+++ b/docs/api/components.md
@@ -1,6 +1,6 @@
 <!-- Generated by documentation.js. Update this documentation by updating the source code. -->
 
-## DomComponents
+## Components
 
 With this module is possible to manage components inside the canvas. You can customize the initial state of the module from the editor initialization, by passing the following [Configuration Object][1]
 
@@ -12,12 +12,40 @@ const editor = grapesjs.init({
 })
 ```
 
-Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance
+Once the editor is instantiated you can use its API and listen to its events. Before using these methods, you should get the module from the instance.
 
 ```js
-const domComponents = editor.DomComponents;
+// Listen to events
+editor.on('component:create', () => { ... });
+
+// Use the API
+const cmp = editor.Components;
+cmp.addType(...);
 ```
 
+## Available Events
+
+*   `component:create` - Component is created (only the model, is not yet mounted in the canvas), called after the init() method
+*   `component:mount` - Component is mounted to an element and rendered in canvas
+*   `component:add` - Triggered when a new component is added to the editor, the model is passed as an argument to the callback
+*   `component:remove` - Triggered when a component is removed, the model is passed as an argument to the callback
+*   `component:remove:before` - Triggered before the remove of the component, the model, remove function (if aborted via options, with this function you can complete the remove) and options (use options.abort = true to prevent remove), are passed as arguments to the callback
+*   `component:clone` - Triggered when a component is cloned, the new model is passed as an argument to the callback
+*   `component:update` - Triggered when a component is updated (moved, styled, etc.), the model is passed as an argument to the callback
+*   `component:update:{propertyName}` - Listen any property change, the model is passed as an argument to the callback
+*   `component:styleUpdate` - Triggered when the style of the component is updated, the model is passed as an argument to the callback
+*   `component:styleUpdate:{propertyName}` - Listen for a specific style property change, the model is passed as an argument to the callback
+*   `component:selected` - New component selected, the selected model is passed as an argument to the callback
+*   `component:deselected` - Component deselected, the deselected model is passed as an argument to the callback
+*   `component:toggled` - Component selection changed, toggled model is passed as an argument to the callback
+*   `component:type:add` - New component type added, the new type is passed as an argument to the callback
+*   `component:type:update` - Component type updated, the updated type is passed as an argument to the callback
+*   `component:drag:start` - Component drag started. Passed an object, to the callback, containing the `target` (component to drag), `parent` (parent of the component) and `index` (component index in the parent)
+*   `component:drag` - During component drag. Passed the same object as in `component:drag:start` event, but in this case, `parent` and `index` are updated by the current pointer
+*   `component:drag:end` - Component drag ended. Passed the same object as in `component:drag:start` event, but in this case, `parent` and `index` are updated by the final pointer
+
+## Methods
+
 *   [getWrapper][2]
 *   [getComponents][3]
 *   [addComponent][4]
@@ -60,7 +88,7 @@ The wrapper doesn't differ from the original Component Model
 
 ```javascript
 // Change background of the wrapper and set some attribute
-var wrapper = domComponents.getWrapper();
+var wrapper = cmp.getWrapper();
 wrapper.set('style', {'background-color': 'red'});
 wrapper.set('attributes', {'title': 'Hello!'});
 ```
@@ -77,7 +105,7 @@ components inside and you can nest them as more as you wish.
 
 ```javascript
 // Let's add some component
-var wrapperChildren = domComponents.getComponents();
+var wrapperChildren = cmp.getComponents();
 var comp1 = wrapperChildren.add({
   style: { 'background-color': 'red'}
 });
@@ -98,26 +126,26 @@ comp1Children.add([
 wrapperChildren.remove(comp2);
 ```
 
-Returns **Components** Collection of components
+Returns **[Components][14]** Collection of components
 
 ## addComponent
 
 Add new components to the wrapper's children. It's the same
-as 'domComponents.getComponents().add(...)'
+as 'cmp.getComponents().add(...)'
 
 ### Parameters
 
-*   `component` **([Object][12] | Component | [Array][14]<[Object][12]>)** Component/s to add
+*   `component` **([Object][12] | Component | [Array][15]<[Object][12]>)** Component/s to add
 
-    *   `component.tagName` **[string][15]** Tag name (optional, default `'div'`)
-    *   `component.type` **[string][15]** Type of the component. Available: ''(default), 'text', 'image' (optional, default `''`)
+    *   `component.tagName` **[string][16]** Tag name (optional, default `'div'`)
+    *   `component.type` **[string][16]** Type of the component. Available: ''(default), 'text', 'image' (optional, default `''`)
     *   `component.removable` **[boolean][13]** If component is removable (optional, default `true`)
     *   `component.draggable` **[boolean][13]** If is possible to move the component around the structure (optional, default `true`)
     *   `component.droppable` **[boolean][13]** If is possible to drop inside other components (optional, default `true`)
     *   `component.badgable` **[boolean][13]** If the badge is visible when the component is selected (optional, default `true`)
     *   `component.stylable` **[boolean][13]** If is possible to style component (optional, default `true`)
     *   `component.copyable` **[boolean][13]** If is possible to copy\&paste the component (optional, default `true`)
-    *   `component.content` **[string][15]** String inside component (optional, default `''`)
+    *   `component.content` **[string][16]** String inside component (optional, default `''`)
     *   `component.style` **[Object][12]** Style object (optional, default `{}`)
     *   `component.attributes` **[Object][12]** Attribute object (optional, default `{}`)
 *   `opt` **[Object][12]** the options object to be used by the \[Components.add][getComponents][3] method (optional, default `{}`)
@@ -126,7 +154,7 @@ as 'domComponents.getComponents().add(...)'
 
 ```javascript
 // Example of a new component with some extra property
-var comp1 = domComponents.addComponent({
+var comp1 = cmp.addComponent({
   tagName: 'div',
   removable: true, // Can't remove it
   draggable: true, // Can't move it
@@ -137,7 +165,7 @@ var comp1 = domComponents.addComponent({
 });
 ```
 
-Returns **(Component | [Array][14]\<Component>)** Component/s added
+Returns **(Component | [Array][15]\<Component>)** Component/s added
 
 ## render
 
@@ -146,7 +174,7 @@ Once the wrapper is rendered, and it's what happens when you init the editor,
 the all new components will be added automatically and property changes are all
 updated immediately
 
-Returns **[HTMLElement][16]** 
+Returns **[HTMLElement][17]** 
 
 ## clear
 
@@ -161,11 +189,11 @@ Returns **this**
 ## addType
 
 Add new component type.
-Read more about this in [Define New Component][17]
+Read more about this in [Define New Component][18]
 
 ### Parameters
 
-*   `type` **[string][15]** Component ID
+*   `type` **[string][16]** Component ID
 *   `methods` **[Object][12]** Component methods
 
 Returns **this** 
@@ -173,11 +201,11 @@ Returns **this**
 ## getType
 
 Get component type.
-Read more about this in [Define New Component][17]
+Read more about this in [Define New Component][18]
 
 ### Parameters
 
-*   `type` **[string][15]** Component ID
+*   `type` **[string][16]** Component ID
 
 Returns **[Object][12]** Component type definition, eg. `{ model: ..., view: ... }`
 
@@ -188,15 +216,15 @@ Remove component type
 ### Parameters
 
 *   `id`  
-*   `type` **[string][15]** Component ID
+*   `type` **[string][16]** Component ID
 
-Returns **([Object][12] | [undefined][18])** Removed component type, undefined otherwise
+Returns **([Object][12] | [undefined][19])** Removed component type, undefined otherwise
 
 ## getTypes
 
 Return the array of all types
 
-Returns **[Array][14]** 
+Returns **[Array][15]** 
 
 [1]: https://github.com/artf/grapesjs/blob/master/src/dom_components/config/config.js
 
@@ -224,12 +252,14 @@ Returns **[Array][14]**
 
 [13]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean
 
-[14]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array
+[14]: #components
+
+[15]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array
 
-[15]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String
+[16]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String
 
-[16]: https://developer.mozilla.org/docs/Web/HTML/Element
+[17]: https://developer.mozilla.org/docs/Web/HTML/Element
 
-[17]: https://grapesjs.com/docs/modules/Components.html#define-new-component
+[18]: https://grapesjs.com/docs/modules/Components.html#define-new-component
 
-[18]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/undefined
+[19]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/undefined
diff --git a/docs/api/editor.md b/docs/api/editor.md
index 74582561f..feaf0e701 100644
--- a/docs/api/editor.md
+++ b/docs/api/editor.md
@@ -21,113 +21,68 @@ editor.on('EVENT-NAME', (some, argument) => {
 })
 ```
 
+*   `update` - The structure of the template is updated (its HTML/CSS)
+*   `undo` - Undo executed
+*   `redo` - Redo executed
+*   `load` - Editor is loaded
+
 ### Components
 
-*   `component:create` - Component is created (only the model, is not yet mounted in the canvas), called after the init() method
-*   `component:mount` - Component is mounted to an element and rendered in canvas
-*   `component:add` - Triggered when a new component is added to the editor, the model is passed as an argument to the callback
-*   `component:remove` - Triggered when a component is removed, the model is passed as an argument to the callback
-*   `component:remove:before` - Triggered before the remove of the component, the model, remove function (if aborted via options, with this function you can complete the remove) and options (use options.abort = true to prevent remove), are passed as arguments to the callback
-*   `component:clone` - Triggered when a component is cloned, the new model is passed as an argument to the callback
-*   `component:update` - Triggered when a component is updated (moved, styled, etc.), the model is passed as an argument to the callback
-*   `component:update:{propertyName}` - Listen any property change, the model is passed as an argument to the callback
-*   `component:styleUpdate` - Triggered when the style of the component is updated, the model is passed as an argument to the callback
-*   `component:styleUpdate:{propertyName}` - Listen for a specific style property change, the model is passed as an argument to the callback
-*   `component:selected` - New component selected, the selected model is passed as an argument to the callback
-*   `component:deselected` - Component deselected, the deselected model is passed as an argument to the callback
-*   `component:toggled` - Component selection changed, toggled model is passed as an argument to the callback
-*   `component:type:add` - New component type added, the new type is passed as an argument to the callback
-*   `component:type:update` - Component type updated, the updated type is passed as an argument to the callback
-*   `component:drag:start` - Component drag started. Passed an object, to the callback, containing the `target` (component to drag), `parent` (parent of the component) and `index` (component index in the parent)
-*   `component:drag` - During component drag. Passed the same object as in `component:drag:start` event, but in this case, `parent` and `index` are updated by the current pointer
-*   `component:drag:end` - Component drag ended. Passed the same object as in `component:drag:start` event, but in this case, `parent` and `index` are updated by the final pointer
+Check the [Components][2] module.
 
 ### Keymaps
 
-*   `keymap:add` - New keymap added. The new keyamp object is passed as an argument
-*   `keymap:remove` - Keymap removed. The removed keyamp object is passed as an argument
-*   `keymap:emit` - Some keymap emitted, in arguments you get keymapId, shortcutUsed, Event
-*   `keymap:emit:{keymapId}` - `keymapId` emitted, in arguments you get keymapId, shortcutUsed, Event
+Check the [Keymaps][3] module.
 
 ### Style Manager
 
-*   `styleManager:update:target` - The target (Component or CSSRule) is changed
-*   `styleManager:change` - Triggered on style property change from new selected component, the view of the property is passed as an argument to the callback
-*   `styleManager:change:{propertyName}` - As above but for a specific style property
+Check the [Style Manager][4] module.
 
-### Storages
+### Storage
 
-*   `storage:start` - Before the storage request is started
-*   `storage:start:store` - Before the store request. The object to store is passed as an argumnet (which you can edit)
-*   `storage:start:load` - Before the load request. Items to load are passed as an argumnet (which you can edit)
-*   `storage:load` - Triggered when something was loaded from the storage, loaded object passed as an argumnet
-*   `storage:store` - Triggered when something is stored to the storage, stored object passed as an argumnet
-*   `storage:end` - After the storage request is ended
-*   `storage:end:store` - After the store request
-*   `storage:end:load` - After the load request
-*   `storage:error` - On any error on storage request, passes the error as an argument
-*   `storage:error:store` - Error on store request, passes the error as an argument
-*   `storage:error:load` - Error on load request, passes the error as an argument
+Check the [Storage][5] module.
 
 ### Canvas
 
-*   `canvas:dragenter` - When something is dragged inside the canvas, `DataTransfer` instance passed as an argument
-*   `canvas:dragover` - When something is dragging on canvas, `DataTransfer` instance passed as an argument
-*   `canvas:drop` - Something is dropped in canvas, `DataTransfer` instance and the dropped model are passed as arguments
-*   `canvas:dragend` - When a drag operation is ended, `DataTransfer` instance passed as an argument
-*   `canvas:dragdata` - On any dataTransfer parse, `DataTransfer` instance and the `result` are passed as arguments.
-
-By changing `result.content` you're able to customize what is dropped
+Check the [Canvas][6] module.
 
 ### RTE
 
-*   `rte:enable` - RTE enabled. The view, on which RTE is enabled, is passed as an argument
-*   `rte:disable` - RTE disabled. The view, on which RTE is disabled, is passed as an argument
+Check the [Rich Text Editor][7] module.
 
 ### Commands
 
-*   `run:{commandName}` - Triggered when some command is called to run (eg. editor.runCommand('preview'))
-*   `stop:{commandName}` - Triggered when some command is called to stop (eg. editor.stopCommand('preview'))
-*   `run:{commandName}:before` - Triggered before the command is called
-*   `stop:{commandName}:before` - Triggered before the command is called to stop
-*   `abort:{commandName}` - Triggered when the command execution is aborted (`editor.on(`run:preview:before`, opts => opts.abort = 1);`)
-*   `run` - Triggered on run of any command. The id and the result are passed as arguments to the callback
-*   `stop` - Triggered on stop of any command. The id and the result are passed as arguments to the callback
+Check the [Commands][8] module.
 
 ### Selectors
 
-Check the [Selectors][2] module.
+Check the [Selectors][9] module.
 
 ### Blocks
 
-Check the [Blocks][3] module.
+Check the [Blocks][10] module.
 
 ### Assets
 
-Check the [Assets][4] module.
+Check the [Assets][11] module.
 
 ### Modal
 
-Check the [Modal][5] module.
+Check the [Modal][12] module.
 
 ### Devices
 
-Check the [Devices][6] module.
+Check the [Devices][13] module.
 
 ### Parser
 
-Check the [Parser][7] module.
+Check the [Parser][14] module.
 
 ### Pages
 
-Check the [Pages][8] module.
-
-### General
+Check the [Pages][15] module.
 
-*   `update` - The structure of the template is updated (its HTML/CSS)
-*   `undo` - Undo executed
-*   `redo` - Redo executed
-*   `load` - Editor is loaded
+## Methods
 
 ## getConfig
 
@@ -135,7 +90,7 @@ Returns configuration object
 
 ### Parameters
 
-*   `prop` **[string][9]?** Property name
+*   `prop` **[string][16]?** Property name
 
 Returns **any** Returns the configuration object or
 the value of the specified property
@@ -146,12 +101,12 @@ Returns HTML built inside canvas
 
 ### Parameters
 
-*   `opts` **[Object][10]** Options (optional, default `{}`)
+*   `opts` **[Object][17]** Options (optional, default `{}`)
 
     *   `opts.component` **Component?** Return the HTML of a specific Component
-    *   `opts.cleanId` **[Boolean][11]** Remove unnecessary IDs (eg. those created automatically) (optional, default `false`)
+    *   `opts.cleanId` **[Boolean][18]** Remove unnecessary IDs (eg. those created automatically) (optional, default `false`)
 
-Returns **[string][9]** HTML string
+Returns **[string][16]** HTML string
 
 ## getCss
 
@@ -159,13 +114,13 @@ Returns CSS built inside canvas
 
 ### Parameters
 
-*   `opts` **[Object][10]** Options (optional, default `{}`)
+*   `opts` **[Object][17]** Options (optional, default `{}`)
 
     *   `opts.component` **Component?** Return the CSS of a specific Component
-    *   `opts.json` **[Boolean][11]** Return an array of CssRules instead of the CSS string (optional, default `false`)
-    *   `opts.avoidProtected` **[Boolean][11]** Don't include protected CSS (optional, default `false`)
+    *   `opts.json` **[Boolean][18]** Return an array of CssRules instead of the CSS string (optional, default `false`)
+    *   `opts.avoidProtected` **[Boolean][18]** Don't include protected CSS (optional, default `false`)
 
-Returns **([String][9] | [Array][12]\<CssRule>)** CSS string or array of CssRules
+Returns **([String][16] | [Array][19]\<CssRule>)** CSS string or array of CssRules
 
 ## getJs
 
@@ -173,11 +128,11 @@ Returns JS of all components
 
 ### Parameters
 
-*   `opts` **[Object][10]** Options (optional, default `{}`)
+*   `opts` **[Object][17]** Options (optional, default `{}`)
 
     *   `opts.component` **Component?** Get the JS of a specific component
 
-Returns **[String][9]** JS string
+Returns **[String][16]** JS string
 
 ## getComponents
 
@@ -197,8 +152,8 @@ Set components inside editor's canvas. This method overrides actual components
 
 ### Parameters
 
-*   `components` **([Array][12]<[Object][10]> | [Object][10] | [string][9])** HTML string or components model
-*   `opt` **[Object][10]** the options object to be used by the \[setComponents][em#setComponents][13] method (optional, default `{}`)
+*   `components` **([Array][19]<[Object][17]> | [Object][17] | [string][16])** HTML string or components model
+*   `opt` **[Object][17]** the options object to be used by the \[setComponents][em#setComponents][20] method (optional, default `{}`)
 
 ### Examples
 
@@ -220,10 +175,10 @@ Add components
 
 ### Parameters
 
-*   `components` **([Array][12]<[Object][10]> | [Object][10] | [string][9])** HTML string or components model
-*   `opts` **[Object][10]** Options
+*   `components` **([Array][19]<[Object][17]> | [Object][17] | [string][16])** HTML string or components model
+*   `opts` **[Object][17]** Options
 
-    *   `opts.avoidUpdateStyle` **[Boolean][11]** If the HTML string contains styles,
+    *   `opts.avoidUpdateStyle` **[Boolean][18]** If the HTML string contains styles,
         by default, they will be created and, if already exist, updated. When this option
         is true, styles already created will not be updated. (optional, default `false`)
 
@@ -239,13 +194,13 @@ editor.addComponents({
 });
 ```
 
-Returns **[Array][12]\<Component>** 
+Returns **[Array][19]\<Component>** 
 
 ## getStyle
 
 Returns style in JSON format object
 
-Returns **[Object][10]** 
+Returns **[Object][17]** 
 
 ## setStyle
 
@@ -253,7 +208,7 @@ Set style inside editor's canvas. This method overrides actual style
 
 ### Parameters
 
-*   `style` **([Array][12]<[Object][10]> | [Object][10] | [string][9])** CSS string or style model
+*   `style` **([Array][19]<[Object][17]> | [Object][17] | [string][16])** CSS string or style model
 *   `opt`   (optional, default `{}`)
 
 ### Examples
@@ -275,7 +230,7 @@ Add styles to the editor
 
 ### Parameters
 
-*   `style` **([Array][12]<[Object][10]> | [Object][10] | [string][9])** CSS string or style model
+*   `style` **([Array][19]<[Object][17]> | [Object][17] | [string][16])** CSS string or style model
 *   `opts`   (optional, default `{}`)
 
 ### Examples
@@ -284,7 +239,7 @@ Add styles to the editor
 editor.addStyle('.cls{color: red}');
 ```
 
-Returns **[Array][12]\<CssRule>** Array of created CssRule instances
+Returns **[Array][19]\<CssRule>** Array of created CssRule instances
 
 ## getSelected
 
@@ -296,7 +251,7 @@ Returns **Model**
 
 Returns an array of all selected components
 
-Returns **[Array][12]** 
+Returns **[Array][19]** 
 
 ## getSelectedToStyle
 
@@ -314,10 +269,10 @@ Select a component
 
 ### Parameters
 
-*   `el` **(Component | [HTMLElement][14])** Component to select
-*   `opts` **[Object][10]?** Options
+*   `el` **(Component | [HTMLElement][21])** Component to select
+*   `opts` **[Object][17]?** Options
 
-    *   `opts.scroll` **[Boolean][11]?** Scroll canvas to the selected element
+    *   `opts.scroll` **[Boolean][18]?** Scroll canvas to the selected element
 
 ### Examples
 
@@ -336,7 +291,7 @@ Add component to selection
 
 ### Parameters
 
-*   `el` **(Component | [HTMLElement][14] | [Array][12])** Component to select
+*   `el` **(Component | [HTMLElement][21] | [Array][19])** Component to select
 
 ### Examples
 
@@ -352,7 +307,7 @@ Remove component from selection
 
 ### Parameters
 
-*   `el` **(Component | [HTMLElement][14] | [Array][12])** Component to select
+*   `el` **(Component | [HTMLElement][21] | [Array][19])** Component to select
 
 ### Examples
 
@@ -368,7 +323,7 @@ Toggle component selection
 
 ### Parameters
 
-*   `el` **(Component | [HTMLElement][14] | [Array][12])** Component to select
+*   `el` **(Component | [HTMLElement][21] | [Array][19])** Component to select
 
 ### Examples
 
@@ -400,7 +355,7 @@ change the canvas to the proper width
 
 ### Parameters
 
-*   `name` **[string][9]** Name of the device
+*   `name` **[string][16]** Name of the device
 
 ### Examples
 
@@ -422,7 +377,7 @@ console.log(device);
 // 'Tablet'
 ```
 
-Returns **[string][9]** Device name
+Returns **[string][16]** Device name
 
 ## runCommand
 
@@ -430,8 +385,8 @@ Execute command
 
 ### Parameters
 
-*   `id` **[string][9]** Command ID
-*   `options` **[Object][10]** Custom options (optional, default `{}`)
+*   `id` **[string][16]** Command ID
+*   `options` **[Object][17]** Custom options (optional, default `{}`)
 
 ### Examples
 
@@ -447,8 +402,8 @@ Stop the command if stop method was provided
 
 ### Parameters
 
-*   `id` **[string][9]** Command ID
-*   `options` **[Object][10]** Custom options (optional, default `{}`)
+*   `id` **[string][16]** Command ID
+*   `options` **[Object][17]** Custom options (optional, default `{}`)
 
 ### Examples
 
@@ -464,9 +419,9 @@ Store data to the current storage
 
 ### Parameters
 
-*   `clb` **[Function][15]** Callback function
+*   `clb` **[Function][22]** Callback function
 
-Returns **[Object][10]** Stored data
+Returns **[Object][17]** Stored data
 
 ## storeData
 
@@ -479,7 +434,7 @@ console.log(editor.storeData());
 // { pages: [...], styles: [...], ... }
 ```
 
-Returns **[Object][10]** 
+Returns **[Object][17]** 
 
 ## load
 
@@ -487,9 +442,9 @@ Load data from the current storage
 
 ### Parameters
 
-*   `clb` **[Function][15]** Callback function
+*   `clb` **[Function][22]** Callback function
 
-Returns **[Object][10]** Stored data
+Returns **[Object][17]** Stored data
 
 ## loadData
 
@@ -497,7 +452,7 @@ Load data from the JSON data object
 
 ### Parameters
 
-*   `data` **[Object][10]** Data to load
+*   `data` **[Object][17]** Data to load
 
 ### Examples
 
@@ -505,21 +460,21 @@ Load data from the JSON data object
 editor.loadData({ pages: [...], styles: [...], ... })
 ```
 
-Returns **[Object][10]** Loaded object
+Returns **[Object][17]** Loaded object
 
 ## getContainer
 
 Returns container element. The one which was indicated as 'container'
 on init method
 
-Returns **[HTMLElement][14]** 
+Returns **[HTMLElement][21]** 
 
 ## getDirtyCount
 
 Return the count of changes made to the content and not yet stored.
 This count resets at any `store()`
 
-Returns **[number][16]** 
+Returns **[number][23]** 
 
 ## refresh
 
@@ -532,9 +487,9 @@ refresh you'll get misleading position of tools
 ### Parameters
 
 *   `opts`  
-*   `options` **[Object][10]?** Options
+*   `options` **[Object][17]?** Options
 
-    *   `options.tools` **[Boolean][11]** Update the position of tools (eg. rich text editor, component highlighter, etc.) (optional, default `false`)
+    *   `options.tools` **[Boolean][18]** Update the position of tools (eg. rich text editor, component highlighter, etc.) (optional, default `false`)
 
 ## setCustomRte
 
@@ -542,7 +497,7 @@ Replace the built-in Rich Text Editor with a custom one.
 
 ### Parameters
 
-*   `obj` **[Object][10]** Custom RTE Interface
+*   `obj` **[Object][17]** Custom RTE Interface
 
 ### Examples
 
@@ -582,7 +537,7 @@ custom parser, pass `null` as the argument
 
 ### Parameters
 
-*   `parser` **([Function][15] | null)** Parser function
+*   `parser` **([Function][22] | null)** Parser function
 
 ### Examples
 
@@ -604,11 +559,11 @@ Returns **this**
 ## setDragMode
 
 Change the global drag mode of components.
-To get more about this feature read: [https://github.com/artf/grapesjs/issues/1936][17]
+To get more about this feature read: [https://github.com/artf/grapesjs/issues/1936][24]
 
 ### Parameters
 
-*   `value` **[String][9]** Drag mode, options: 'absolute' | 'translate'
+*   `value` **[String][16]** Drag mode, options: 'absolute' | 'translate'
 
 Returns **this** 
 
@@ -619,10 +574,10 @@ Trigger event log message
 ### Parameters
 
 *   `msg` **any** Message to log
-*   `opts` **[Object][10]** Custom options (optional, default `{}`)
+*   `opts` **[Object][17]** Custom options (optional, default `{}`)
 
-    *   `opts.ns` **[String][9]** Namespace of the log (eg. to use in plugins) (optional, default `''`)
-    *   `opts.level` **[String][9]** Level of the log, `debug`, `info`, `warning`, `error` (optional, default `'debug'`)
+    *   `opts.ns` **[String][16]** Namespace of the log (eg. to use in plugins) (optional, default `''`)
+    *   `opts.level` **[String][16]** Level of the log, `debug`, `info`, `warning`, `error` (optional, default `'debug'`)
 
 ### Examples
 
@@ -644,11 +599,11 @@ Translate label
 ### Parameters
 
 *   `args` **...any** 
-*   `key` **[String][9]** Label to translate
-*   `opts` **[Object][10]?** Options for the translation
+*   `key` **[String][16]** Label to translate
+*   `opts` **[Object][17]?** Options for the translation
 
-    *   `opts.params` **[Object][10]?** Params for the translation
-    *   `opts.noWarn` **[Boolean][11]?** Avoid warnings in case of missing resources
+    *   `opts.params` **[Object][17]?** Params for the translation
+    *   `opts.noWarn` **[Boolean][18]?** Avoid warnings in case of missing resources
 
 ### Examples
 
@@ -660,7 +615,7 @@ editor.t('msg2', { params: { test: 'hello' } });
 editor.t('msg2', { params: { test: 'hello' }, l: 'it' });
 ```
 
-Returns **[String][9]** 
+Returns **[String][16]** 
 
 ## on
 
@@ -668,8 +623,8 @@ Attach event
 
 ### Parameters
 
-*   `event` **[string][9]** Event name
-*   `callback` **[Function][15]** Callback function
+*   `event` **[string][16]** Event name
+*   `callback` **[Function][22]** Callback function
 
 Returns **this** 
 
@@ -679,8 +634,8 @@ Attach event and detach it after the first run
 
 ### Parameters
 
-*   `event` **[string][9]** Event name
-*   `callback` **[Function][15]** Callback function
+*   `event` **[string][16]** Event name
+*   `callback` **[Function][22]** Callback function
 
 Returns **this** 
 
@@ -690,8 +645,8 @@ Detach event
 
 ### Parameters
 
-*   `event` **[string][9]** Event name
-*   `callback` **[Function][15]** Callback function
+*   `event` **[string][16]** Event name
+*   `callback` **[Function][22]** Callback function
 
 Returns **this** 
 
@@ -701,7 +656,7 @@ Trigger event
 
 ### Parameters
 
-*   `event` **[string][9]** Event to trigger
+*   `event` **[string][16]** Event to trigger
 
 Returns **this** 
 
@@ -713,7 +668,7 @@ Destroy the editor
 
 Render editor
 
-Returns **[HTMLElement][14]** 
+Returns **[HTMLElement][21]** 
 
 ## onReady
 
@@ -722,7 +677,7 @@ The callback will be executed immediately if the method is called on the already
 
 ### Parameters
 
-*   `clb` **[Function][15]** Callback to trigger
+*   `clb` **[Function][22]** Callback to trigger
 
 ### Examples
 
@@ -738,8 +693,8 @@ Print safe HTML by using ES6 tagged template strings.
 
 ### Parameters
 
-*   `literals` **[Array][12]<[String][9]>** 
-*   `substs` **[Array][12]<[String][9]>** 
+*   `literals` **[Array][19]<[String][16]>** 
+*   `substs` **[Array][19]<[String][16]>** 
 
 ### Examples
 
@@ -750,38 +705,52 @@ const safeStr = '<b>Hello</b>';
 const strHtml = editor.html`Escaped ${unsafeStr}, unescaped $${safeStr}`;
 ```
 
-Returns **[String][9]** 
+Returns **[String][16]** 
 
 [1]: https://github.com/artf/grapesjs/blob/master/src/editor/config/config.js
 
-[2]: /api/selector_manager.html
+[2]: /api/components.html
+
+[3]: /api/keymaps.html
+
+[4]: /api/style_manager.html
+
+[5]: /api/storage_manager.html
+
+[6]: /api/canvas.html
+
+[7]: /api/rich_text_editor.html
+
+[8]: /api/commands.html
+
+[9]: /api/selector_manager.html
 
-[3]: /api/block_manager.html
+[10]: /api/block_manager.html
 
-[4]: /api/assets.html
+[11]: /api/assets.html
 
-[5]: /api/modal_dialog.html
+[12]: /api/modal_dialog.html
 
-[6]: /api/device_manager.html
+[13]: /api/device_manager.html
 
-[7]: /api/parser.html
+[14]: /api/parser.html
 
-[8]: /api/pages.html
+[15]: /api/pages.html
 
-[9]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String
+[16]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String
 
-[10]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object
+[17]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object
 
-[11]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean
+[18]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean
 
-[12]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array
+[19]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array
 
-[13]: em#setComponents
+[20]: em#setComponents
 
-[14]: https://developer.mozilla.org/docs/Web/HTML/Element
+[21]: https://developer.mozilla.org/docs/Web/HTML/Element
 
-[15]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function
+[22]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function
 
-[16]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number
+[23]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number
 
-[17]: https://github.com/artf/grapesjs/issues/1936
+[24]: https://github.com/artf/grapesjs/issues/1936
diff --git a/docs/api/keymaps.md b/docs/api/keymaps.md
index add85f6d9..269c66f14 100644
--- a/docs/api/keymaps.md
+++ b/docs/api/keymaps.md
@@ -19,12 +19,26 @@ const editor = grapesjs.init({
 })
 ```
 
-Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance
+Once the editor is instantiated you can use its API and listen to its events. Before using these methods, you should get the module from the instance.
 
 ```js
+// Listen to events
+editor.on('keymap:add', () => { ... });
+
+// Use the API
 const keymaps = editor.Keymaps;
+keymaps.add(...);
 ```
 
+## Available Events
+
+*   `keymap:add` - New keymap added. The new keyamp object is passed as an argument
+*   `keymap:remove` - Keymap removed. The removed keyamp object is passed as an argument
+*   `keymap:emit` - Some keymap emitted, in arguments you get keymapId, shortcutUsed, Event
+*   `keymap:emit:{keymapId}` - `keymapId` emitted, in arguments you get keymapId, shortcutUsed, Event
+
+## Methods
+
 *   [getConfig][1]
 *   [add][2]
 *   [get][3]
diff --git a/docs/api/rich_text_editor.md b/docs/api/rich_text_editor.md
index fd31cf86d..c71634583 100644
--- a/docs/api/rich_text_editor.md
+++ b/docs/api/rich_text_editor.md
@@ -15,12 +15,24 @@ const editor = grapesjs.init({
 })
 ```
 
-Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance
+Once the editor is instantiated you can use its API and listen to its events. Before using these methods, you should get the module from the instance.
 
 ```js
+// Listen to events
+editor.on('rte:enable', () => { ... });
+
+// Use the API
 const rte = editor.RichTextEditor;
+rte.add(...);
 ```
 
+## Available Events
+
+*   `rte:enable` - RTE enabled. The view, on which RTE is enabled, is passed as an argument
+*   `rte:disable` - RTE disabled. The view, on which RTE is disabled, is passed as an argument
+
+## Methods
+
 *   [add][3]
 *   [get][4]
 *   [getAll][5]
diff --git a/docs/api/storage_manager.md b/docs/api/storage_manager.md
index 271e6c38c..efb105874 100644
--- a/docs/api/storage_manager.md
+++ b/docs/api/storage_manager.md
@@ -12,12 +12,33 @@ const editor = grapesjs.init({
 })
 ```
 
-Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance
+Once the editor is instantiated you can use its API and listen to its events. Before using these methods, you should get the module from the instance.
 
 ```js
+// Listen to events
+editor.on('storage:start', () => { ... });
+
+// Use the API
 const storageManager = editor.StorageManager;
+storageManager.add(...);
 ```
 
+## Available Events
+
+*   `storage:start` - Before the storage request is started
+*   `storage:start:store` - Before the store request. The object to store is passed as an argumnet (which you can edit)
+*   `storage:start:load` - Before the load request. Items to load are passed as an argumnet (which you can edit)
+*   `storage:load` - Triggered when something was loaded from the storage, loaded object passed as an argumnet
+*   `storage:store` - Triggered when something is stored to the storage, stored object passed as an argumnet
+*   `storage:end` - After the storage request is ended
+*   `storage:end:store` - After the store request
+*   `storage:end:load` - After the load request
+*   `storage:error` - On any error on storage request, passes the error as an argument
+*   `storage:error:store` - Error on store request, passes the error as an argument
+*   `storage:error:load` - Error on load request, passes the error as an argument
+
+## Methods
+
 *   [getConfig][2]
 *   [isAutosave][3]
 *   [setAutosave][4]
diff --git a/docs/api/style_manager.md b/docs/api/style_manager.md
index 0b20d3cc5..48dff409d 100644
--- a/docs/api/style_manager.md
+++ b/docs/api/style_manager.md
@@ -13,16 +13,24 @@ const editor = grapesjs.init({
 })
 ```
 
-Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance
+Once the editor is instantiated you can use its API and listen to its events. Before using these methods, you should get the module from the instance.
 
 ```js
+// Listen to events
+editor.on('style:sector:add', (sector) => { ... });
+
+// Use the API
 const styleManager = editor.StyleManager;
+styleManager.addSector(...);
 ```
 
 ## Available Events
 
 *   `style:sector:add` - Sector added. The [Sector] is passed as an argument to the callback.
 *   `style:target` - Target selection changed. The target (or `null` in case the target is deselected) is passed as an argument to the callback.
+*   `styleManager:update:target` - The target (Component or CSSRule) is changed
+*   `styleManager:change` - Triggered on style property change from new selected component, the view of the property is passed as an argument to the callback
+*   `styleManager:change:{propertyName}` - As above but for a specific style property
 
 ## Methods
 
diff --git a/src/editor/index.js b/src/editor/index.js
index 5485d6b21..d1af83e2d 100644
--- a/src/editor/index.js
+++ b/src/editor/index.js
@@ -51,6 +51,7 @@
  * ### Pages
  * Check the [Pages](/api/pages.html) module.
  *
+ * ## Methods
  * @module Editor
  */
 import defaults from './config/config';