diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js
index e4bb0c66b..860bc5c16 100644
--- a/docs/.vuepress/config.js
+++ b/docs/.vuepress/config.js
@@ -71,6 +71,7 @@ module.exports = {
         ['/api/style_manager', 'Style Manager'],
         ['/api/storage_manager', 'Storage Manager'],
         ['/api/device_manager', 'Device Manager'],
+        ['/api/device', `${subDivider}Device`],
         ['/api/selector_manager', 'Selector Manager'],
         ['/api/css_composer', 'CSS Composer'],
         ['/api/css_rule', `${subDivider}CssRule`],
diff --git a/docs/api.js b/docs/api.js
index ab7c48df5..ea23fa811 100644
--- a/docs/api.js
+++ b/docs/api.js
@@ -1,46 +1,50 @@
 // This script uses documentation to generate API Reference files
 const path = require('path');
-const exec = require('child_process').exec;
+const documentation = require('documentation');
+const fs = require('fs');
 const docRoot = __dirname;
 const srcRoot = path.join(docRoot, '../src/');
-const binRoot = path.join(docRoot, '../node_modules/.bin/');
-const cmds = [
-  ['editor/index.js', 'editor.md'],
-  ['asset_manager/index.js', 'assets.md'],
-  ['block_manager/index.js', 'block_manager.md'],
-  ['commands/index.js', 'commands.md'],
-  ['dom_components/index.js', 'components.md'],
-  ['dom_components/model/Component.js', 'component.md'],
-  ['panels/index.js', 'panels.md'],
-  ['style_manager/index.js', 'style_manager.md'],
-  ['storage_manager/index.js', 'storage_manager.md'],
-  ['device_manager/index.js', 'device_manager.md'],
-  ['selector_manager/index.js', 'selector_manager.md'],
-  ['css_composer/index.js', 'css_composer.md'],
-  ['css_composer/model/CssRule.js', 'css_rule.md'],
-  ['modal_dialog/index.js', 'modal_dialog.md'],
-  ['rich_text_editor/index.js', 'rich_text_editor.md'],
-  ['keymaps/index.js', 'keymaps.md'],
-  ['undo_manager/index.js', 'undo_manager.md'],
-  ['canvas/index.js', 'canvas.md'],
-  ['i18n/index.js', 'i18n.md'],
-  ['pages/index.js', 'pages.md'],
-  ['pages/model/Page.js', 'page.md'],
-  ['parser/index.js', 'parser.md'],
-].map(entry =>
-  `${binRoot}documentation build ${srcRoot}/${entry[0]} -o ${docRoot}/api/${entry[1]} -f md --shallow --markdown-toc false`)
-.join(' && ');
 
-console.log('Start API Reference generation...');
-exec(cmds, (error, stdout, stderr) => {
-  if (error) {
-    console.error( 'Failed to update API Reference: ', error);
-    return;
-  }
+const log = (...args) => console.log(...args);
 
-  stdout.trim().split('\n').forEach(function (line) {
-    console.info(line);
-  });
+async function generateDocs () {
+  log('Start API Reference generation...');
 
-  console.log('API Reference generation done!');
-});
+  await Promise.all([
+    // ['editor/index.js', 'editor.md'],
+    // ['asset_manager/index.js', 'assets.md'],
+    // ['block_manager/index.js', 'block_manager.md'],
+    // ['commands/index.js', 'commands.md'],
+    // ['dom_components/index.js', 'components.md'],
+    // ['dom_components/model/Component.js', 'component.md'],
+    // ['panels/index.js', 'panels.md'],
+    // ['style_manager/index.js', 'style_manager.md'],
+    // ['storage_manager/index.js', 'storage_manager.md'],
+    ['device_manager/index.js', 'device_manager.md'],
+    ['device_manager/model/Device.js', 'device.md'],
+    // ['selector_manager/index.js', 'selector_manager.md'],
+    // ['css_composer/index.js', 'css_composer.md'],
+    // ['css_composer/model/CssRule.js', 'css_rule.md'],
+    // ['modal_dialog/index.js', 'modal_dialog.md'],
+    // ['rich_text_editor/index.js', 'rich_text_editor.md'],
+    // ['keymaps/index.js', 'keymaps.md'],
+    // ['undo_manager/index.js', 'undo_manager.md'],
+    // ['canvas/index.js', 'canvas.md'],
+    // ['i18n/index.js', 'i18n.md'],
+    // ['pages/index.js', 'pages.md'],
+    // ['pages/model/Page.js', 'page.md'],
+    // ['parser/index.js', 'parser.md'],
+  ].map(async (file) =>
+    documentation.build([`${srcRoot}/${file[0]}`], { shallow: true })
+      .then(documentation.formats.md)
+      .then(output => {
+        const res = output.replace(/\*\*\\\[/g, '**[');
+        fs.writeFileSync(`${docRoot}/api/${file[1]}`, res);
+        log('Created', file[1]);
+      })
+  ));
+
+  log('API Reference generation done!');
+};
+
+generateDocs();
\ No newline at end of file
diff --git a/docs/api/device.md b/docs/api/device.md
new file mode 100644
index 000000000..31e4b02bf
--- /dev/null
+++ b/docs/api/device.md
@@ -0,0 +1,9 @@
+<!-- Generated by documentation.js. Update this documentation by updating the source code. -->
+
+## getWidth
+
+Get device width.
+
+Returns **[String][1]** 
+
+[1]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String
diff --git a/docs/api/device_manager.md b/docs/api/device_manager.md
index 12ab31586..5b37c63fa 100644
--- a/docs/api/device_manager.md
+++ b/docs/api/device_manager.md
@@ -1,6 +1,6 @@
 <!-- Generated by documentation.js. Update this documentation by updating the source code. -->
 
-## DeviceManager
+## Devices
 
 You can customize the initial state of the module from the editor initialization, by passing the following [Configuration Object][1]
 
@@ -15,22 +15,34 @@ 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
 
 ```js
-const deviceManager = editor.DeviceManager;
+const deviceManager = editor.Devices;
 ```
 
+## Available Events
+
+*   `device:add` - Added new device. The [Device] is passed as an argument to the callback
+*   `device:remove` - Device removed. The [Device] is passed as an argument to the callback
+*   `device:select` - New device selected. The newly selected [Device] and the previous one, are passed as arguments to the callback
+*   `device:update` - Device updated. The updated [Device] and the object containing changes are passed as arguments to the callback
+*   `device` - Catch-all event for all the events mentioned above. An object containing all the available data about the triggered event is passed as an argument to the callback
+
+## Methods
+
 *   [add][2]
 *   [get][3]
 *   [getAll][4]
 
+[Device]: device.html
+
 ## add
 
-Add new device to the collection. URLs are supposed to be unique
+Add new device.
 
 ### Parameters
 
 *   `id` **[String][5]** Device id
 *   `width` **[String][5]** Width of the device
-*   `opts` **[Object][6]?** Custom options (optional, default `{}`)
+*   `options` **[Object][6]?** Custom options (optional, default `{}`)
 
 ### Examples
 
@@ -45,7 +57,7 @@ deviceManager.add('tablet2', '900px', {
 });
 ```
 
-Returns **Device** Added device
+Returns **[Device]** Added device
 
 ## get
 
@@ -53,7 +65,7 @@ Return device by name
 
 ### Parameters
 
-*   `name` **[string][5]** Name of the device
+*   `name` **[String][5]** Name of the device
 
 ### Examples
 
@@ -63,6 +75,8 @@ console.log(JSON.stringify(device));
 // {name: 'Tablet', width: '900px'}
 ```
 
+Returns **[Device]** 
+
 ## getAll
 
 Return all devices
diff --git a/docs/api/editor.md b/docs/api/editor.md
index 75da2bfef..ac9501ab3 100644
--- a/docs/api/editor.md
+++ b/docs/api/editor.md
@@ -123,13 +123,17 @@ By changing `result.content` you're able to customize what is dropped
 *   `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
 
+### Devices
+
+Check the [Devices][2] module.
+
 ### Parser
 
-Check the [Parser][2] module.
+Check the [Parser][3] module.
 
 ### Pages
 
-Check the [Pages][3] module.
+Check the [Pages][4] module.
 
 ### General
 
@@ -145,7 +149,7 @@ Returns configuration object
 
 ### Parameters
 
-*   `prop` **[string][4]?** Property name
+*   `prop` **[string][5]?** Property name
 
 Returns **any** Returns the configuration object or
 the value of the specified property
@@ -156,12 +160,12 @@ Returns HTML built inside canvas
 
 ### Parameters
 
-*   `opts` **[Object][5]** Options (optional, default `{}`)
+*   `opts` **[Object][6]** Options (optional, default `{}`)
 
     *   `opts.component` **Component?** Return the HTML of a specific Component
-    *   `opts.cleanId` **[Boolean][6]** Remove unnecessary IDs (eg. those created automatically) (optional, default `false`)
+    *   `opts.cleanId` **[Boolean][7]** Remove unnecessary IDs (eg. those created automatically) (optional, default `false`)
 
-Returns **[string][4]** HTML string
+Returns **[string][5]** HTML string
 
 ## getCss
 
@@ -169,13 +173,13 @@ Returns CSS built inside canvas
 
 ### Parameters
 
-*   `opts` **[Object][5]** Options (optional, default `{}`)
+*   `opts` **[Object][6]** Options (optional, default `{}`)
 
     *   `opts.component` **Component?** Return the CSS of a specific Component
-    *   `opts.json` **[Boolean][6]** Return an array of CssRules instead of the CSS string (optional, default `false`)
-    *   `opts.avoidProtected` **[Boolean][6]** Don't include protected CSS (optional, default `false`)
+    *   `opts.json` **[Boolean][7]** Return an array of CssRules instead of the CSS string (optional, default `false`)
+    *   `opts.avoidProtected` **[Boolean][7]** Don't include protected CSS (optional, default `false`)
 
-Returns **([String][4] | [Array][7]\<CssRule>)** CSS string or array of CssRules
+Returns **([String][5] | [Array][8]\<CssRule>)** CSS string or array of CssRules
 
 ## getJs
 
@@ -183,11 +187,11 @@ Returns JS of all components
 
 ### Parameters
 
-*   `opts` **[Object][5]** Options (optional, default `{}`)
+*   `opts` **[Object][6]** Options (optional, default `{}`)
 
     *   `opts.component` **Component?** Get the JS of a specific component
 
-Returns **[String][4]** JS string
+Returns **[String][5]** JS string
 
 ## getComponents
 
@@ -207,8 +211,8 @@ Set components inside editor's canvas. This method overrides actual components
 
 ### Parameters
 
-*   `components` **([Array][7]<[Object][5]> | [Object][5] | [string][4])** HTML string or components model
-*   `opt` **[Object][5]** the options object to be used by the \[setComponents][em#setComponents][8] method (optional, default `{}`)
+*   `components` **([Array][8]<[Object][6]> | [Object][6] | [string][5])** HTML string or components model
+*   `opt` **[Object][6]** the options object to be used by the \[setComponents][em#setComponents][9] method (optional, default `{}`)
 
 ### Examples
 
@@ -230,10 +234,10 @@ Add components
 
 ### Parameters
 
-*   `components` **([Array][7]<[Object][5]> | [Object][5] | [string][4])** HTML string or components model
-*   `opts` **[Object][5]** Options
+*   `components` **([Array][8]<[Object][6]> | [Object][6] | [string][5])** HTML string or components model
+*   `opts` **[Object][6]** Options
 
-    *   `opts.avoidUpdateStyle` **[Boolean][6]** If the HTML string contains styles,
+    *   `opts.avoidUpdateStyle` **[Boolean][7]** 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`)
 
@@ -249,13 +253,13 @@ editor.addComponents({
 });
 ```
 
-Returns **[Array][7]\<Component>** 
+Returns **[Array][8]\<Component>** 
 
 ## getStyle
 
 Returns style in JSON format object
 
-Returns **[Object][5]** 
+Returns **[Object][6]** 
 
 ## setStyle
 
@@ -263,7 +267,7 @@ Set style inside editor's canvas. This method overrides actual style
 
 ### Parameters
 
-*   `style` **([Array][7]<[Object][5]> | [Object][5] | [string][4])** CSS string or style model
+*   `style` **([Array][8]<[Object][6]> | [Object][6] | [string][5])** CSS string or style model
 *   `opt`   (optional, default `{}`)
 
 ### Examples
@@ -285,7 +289,7 @@ Add styles to the editor
 
 ### Parameters
 
-*   `style` **([Array][7]<[Object][5]> | [Object][5] | [string][4])** CSS string or style model
+*   `style` **([Array][8]<[Object][6]> | [Object][6] | [string][5])** CSS string or style model
 *   `opts`   (optional, default `{}`)
 
 ### Examples
@@ -294,7 +298,7 @@ Add styles to the editor
 editor.addStyle('.cls{color: red}');
 ```
 
-Returns **[Array][7]\<CssRule>** Array of created CssRule instances
+Returns **[Array][8]\<CssRule>** Array of created CssRule instances
 
 ## getSelected
 
@@ -306,7 +310,7 @@ Returns **Model**
 
 Returns an array of all selected components
 
-Returns **[Array][7]** 
+Returns **[Array][8]** 
 
 ## getSelectedToStyle
 
@@ -324,10 +328,10 @@ Select a component
 
 ### Parameters
 
-*   `el` **(Component | [HTMLElement][9])** Component to select
-*   `opts` **[Object][5]?** Options
+*   `el` **(Component | [HTMLElement][10])** Component to select
+*   `opts` **[Object][6]?** Options
 
-    *   `opts.scroll` **[Boolean][6]?** Scroll canvas to the selected element
+    *   `opts.scroll` **[Boolean][7]?** Scroll canvas to the selected element
 
 ### Examples
 
@@ -346,7 +350,7 @@ Add component to selection
 
 ### Parameters
 
-*   `el` **(Component | [HTMLElement][9] | [Array][7])** Component to select
+*   `el` **(Component | [HTMLElement][10] | [Array][8])** Component to select
 
 ### Examples
 
@@ -362,7 +366,7 @@ Remove component from selection
 
 ### Parameters
 
-*   `el` **(Component | [HTMLElement][9] | [Array][7])** Component to select
+*   `el` **(Component | [HTMLElement][10] | [Array][8])** Component to select
 
 ### Examples
 
@@ -378,7 +382,7 @@ Toggle component selection
 
 ### Parameters
 
-*   `el` **(Component | [HTMLElement][9] | [Array][7])** Component to select
+*   `el` **(Component | [HTMLElement][10] | [Array][8])** Component to select
 
 ### Examples
 
@@ -410,7 +414,7 @@ change the canvas to the proper width
 
 ### Parameters
 
-*   `name` **[string][4]** Name of the device
+*   `name` **[string][5]** Name of the device
 
 ### Examples
 
@@ -432,7 +436,7 @@ console.log(device);
 // 'Tablet'
 ```
 
-Returns **[string][4]** Device name
+Returns **[string][5]** Device name
 
 ## runCommand
 
@@ -440,8 +444,8 @@ Execute command
 
 ### Parameters
 
-*   `id` **[string][4]** Command ID
-*   `options` **[Object][5]** Custom options (optional, default `{}`)
+*   `id` **[string][5]** Command ID
+*   `options` **[Object][6]** Custom options (optional, default `{}`)
 
 ### Examples
 
@@ -457,8 +461,8 @@ Stop the command if stop method was provided
 
 ### Parameters
 
-*   `id` **[string][4]** Command ID
-*   `options` **[Object][5]** Custom options (optional, default `{}`)
+*   `id` **[string][5]** Command ID
+*   `options` **[Object][6]** Custom options (optional, default `{}`)
 
 ### Examples
 
@@ -474,9 +478,9 @@ Store data to the current storage
 
 ### Parameters
 
-*   `clb` **[Function][10]** Callback function
+*   `clb` **[Function][11]** Callback function
 
-Returns **[Object][5]** Stored data
+Returns **[Object][6]** Stored data
 
 ## storeData
 
@@ -489,7 +493,7 @@ console.log(editor.storeData());
 // { pages: [...], styles: [...], ... }
 ```
 
-Returns **[Object][5]** 
+Returns **[Object][6]** 
 
 ## load
 
@@ -497,9 +501,9 @@ Load data from the current storage
 
 ### Parameters
 
-*   `clb` **[Function][10]** Callback function
+*   `clb` **[Function][11]** Callback function
 
-Returns **[Object][5]** Stored data
+Returns **[Object][6]** Stored data
 
 ## loadData
 
@@ -507,7 +511,7 @@ Load data from the JSON data object
 
 ### Parameters
 
-*   `data` **[Object][5]** Data to load
+*   `data` **[Object][6]** Data to load
 
 ### Examples
 
@@ -515,21 +519,21 @@ Load data from the JSON data object
 editor.loadData({ pages: [...], styles: [...], ... })
 ```
 
-Returns **[Object][5]** Loaded object
+Returns **[Object][6]** Loaded object
 
 ## getContainer
 
 Returns container element. The one which was indicated as 'container'
 on init method
 
-Returns **[HTMLElement][9]** 
+Returns **[HTMLElement][10]** 
 
 ## getDirtyCount
 
 Return the count of changes made to the content and not yet stored.
 This count resets at any `store()`
 
-Returns **[number][11]** 
+Returns **[number][12]** 
 
 ## refresh
 
@@ -542,9 +546,9 @@ refresh you'll get misleading position of tools
 ### Parameters
 
 *   `opts`  
-*   `options` **[Object][5]?** Options
+*   `options` **[Object][6]?** Options
 
-    *   `options.tools` **[Boolean][6]** Update the position of tools (eg. rich text editor, component highlighter, etc.) (optional, default `false`)
+    *   `options.tools` **[Boolean][7]** Update the position of tools (eg. rich text editor, component highlighter, etc.) (optional, default `false`)
 
 ## setCustomRte
 
@@ -552,7 +556,7 @@ Replace the built-in Rich Text Editor with a custom one.
 
 ### Parameters
 
-*   `obj` **[Object][5]** Custom RTE Interface
+*   `obj` **[Object][6]** Custom RTE Interface
 
 ### Examples
 
@@ -592,7 +596,7 @@ custom parser, pass `null` as the argument
 
 ### Parameters
 
-*   `parser` **([Function][10] | null)** Parser function
+*   `parser` **([Function][11] | null)** Parser function
 
 ### Examples
 
@@ -614,11 +618,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][12]
+To get more about this feature read: [https://github.com/artf/grapesjs/issues/1936][13]
 
 ### Parameters
 
-*   `value` **[String][4]** Drag mode, options: 'absolute' | 'translate'
+*   `value` **[String][5]** Drag mode, options: 'absolute' | 'translate'
 
 Returns **this** 
 
@@ -629,10 +633,10 @@ Trigger event log message
 ### Parameters
 
 *   `msg` **any** Message to log
-*   `opts` **[Object][5]** Custom options (optional, default `{}`)
+*   `opts` **[Object][6]** Custom options (optional, default `{}`)
 
-    *   `opts.ns` **[String][4]** Namespace of the log (eg. to use in plugins) (optional, default `''`)
-    *   `opts.level` **[String][4]** Level of the log, `debug`, `info`, `warning`, `error` (optional, default `'debug'`)
+    *   `opts.ns` **[String][5]** Namespace of the log (eg. to use in plugins) (optional, default `''`)
+    *   `opts.level` **[String][5]** Level of the log, `debug`, `info`, `warning`, `error` (optional, default `'debug'`)
 
 ### Examples
 
@@ -654,11 +658,11 @@ Translate label
 ### Parameters
 
 *   `args` **...any** 
-*   `key` **[String][4]** Label to translate
-*   `opts` **[Object][5]?** Options for the translation
+*   `key` **[String][5]** Label to translate
+*   `opts` **[Object][6]?** Options for the translation
 
-    *   `opts.params` **[Object][5]?** Params for the translation
-    *   `opts.noWarn` **[Boolean][6]?** Avoid warnings in case of missing resources
+    *   `opts.params` **[Object][6]?** Params for the translation
+    *   `opts.noWarn` **[Boolean][7]?** Avoid warnings in case of missing resources
 
 ### Examples
 
@@ -670,7 +674,7 @@ editor.t('msg2', { params: { test: 'hello' } });
 editor.t('msg2', { params: { test: 'hello' }, l: 'it' });
 ```
 
-Returns **[String][4]** 
+Returns **[String][5]** 
 
 ## on
 
@@ -678,8 +682,8 @@ Attach event
 
 ### Parameters
 
-*   `event` **[string][4]** Event name
-*   `callback` **[Function][10]** Callback function
+*   `event` **[string][5]** Event name
+*   `callback` **[Function][11]** Callback function
 
 Returns **this** 
 
@@ -689,8 +693,8 @@ Attach event and detach it after the first run
 
 ### Parameters
 
-*   `event` **[string][4]** Event name
-*   `callback` **[Function][10]** Callback function
+*   `event` **[string][5]** Event name
+*   `callback` **[Function][11]** Callback function
 
 Returns **this** 
 
@@ -700,8 +704,8 @@ Detach event
 
 ### Parameters
 
-*   `event` **[string][4]** Event name
-*   `callback` **[Function][10]** Callback function
+*   `event` **[string][5]** Event name
+*   `callback` **[Function][11]** Callback function
 
 Returns **this** 
 
@@ -711,7 +715,7 @@ Trigger event
 
 ### Parameters
 
-*   `event` **[string][4]** Event to trigger
+*   `event` **[string][5]** Event to trigger
 
 Returns **this** 
 
@@ -723,7 +727,7 @@ Destroy the editor
 
 Render editor
 
-Returns **[HTMLElement][9]** 
+Returns **[HTMLElement][10]** 
 
 ## html
 
@@ -731,8 +735,8 @@ Print safe HTML by using ES6 tagged template strings.
 
 ### Parameters
 
-*   `literals` **[Array][7]<[String][4]>** 
-*   `substs` **[Array][7]<[String][4]>** 
+*   `literals` **[Array][8]<[String][5]>** 
+*   `substs` **[Array][8]<[String][5]>** 
 
 ### Examples
 
@@ -743,28 +747,30 @@ const safeStr = '<b>Hello</b>';
 const strHtml = editor.html`Escaped ${unsafeStr}, unescaped $${safeStr}`;
 ```
 
-Returns **[String][4]** 
+Returns **[String][5]** 
 
 [1]: https://github.com/artf/grapesjs/blob/master/src/editor/config/config.js
 
-[2]: /api/parser.html
+[2]: /api/devices.html
+
+[3]: /api/parser.html
 
-[3]: /api/pages.html
+[4]: /api/pages.html
 
-[4]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String
+[5]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String
 
-[5]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object
+[6]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object
 
-[6]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean
+[7]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean
 
-[7]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array
+[8]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array
 
-[8]: em#setComponents
+[9]: em#setComponents
 
-[9]: https://developer.mozilla.org/docs/Web/HTML/Element
+[10]: https://developer.mozilla.org/docs/Web/HTML/Element
 
-[10]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function
+[11]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function
 
-[11]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number
+[12]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number
 
-[12]: https://github.com/artf/grapesjs/issues/1936
+[13]: https://github.com/artf/grapesjs/issues/1936
diff --git a/src/device_manager/index.js b/src/device_manager/index.js
index 3279982e9..c3ba8742a 100644
--- a/src/device_manager/index.js
+++ b/src/device_manager/index.js
@@ -11,19 +11,39 @@
  * Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance
  *
  * ```js
- * const deviceManager = editor.DeviceManager;
+ * const deviceManager = editor.Devices;
  * ```
+ * ## Available Events
+ * * `device:add` - Added new device. The [Device] is passed as an argument to the callback
+ * * `device:remove` - Device removed. The [Device] is passed as an argument to the callback
+ * * `device:select` - New device selected. The newly selected [Device] and the previous one, are passed as arguments to the callback
+ * * `device:update` - Device updated. The updated [Device] and the object containing changes are passed as arguments to the callback
+ * * `device` - Catch-all event for all the events mentioned above. An object containing all the available data about the triggered event is passed as an argument to the callback
  *
+ * ## Methods
  * * [add](#add)
  * * [get](#get)
  * * [getAll](#getAll)
  *
- * @module DeviceManager
+ * [Device]: device.html
+ *
+ * @module Devices
  */
 import defaults from './config/config';
+import Device from './model/Device';
 import Devices from './model/Devices';
 import DevicesView from './view/DevicesView';
 
+export const evAll = 'device';
+export const evPfx = `${evAll}:`;
+export const evSelect = `${evPfx}select`;
+export const evSelectBefore = `${evSelect}:before`;
+export const evUpdate = `${evPfx}update`;
+export const evAdd = `${evPfx}add`;
+export const evAddBefore = `${evAdd}:before`;
+export const evRemove = `${evPfx}remove`;
+export const evRemoveBefore = `${evRemove}:before`;
+
 export default () => {
   let c = {};
   let devices;
@@ -32,6 +52,21 @@ export default () => {
   return {
     name: 'DeviceManager',
 
+    Device,
+
+    Devices,
+
+    events: {
+      all: evAll,
+      select: evSelect,
+      selectBefore: evSelectBefore,
+      update: evUpdate,
+      add: evAdd,
+      addBefore: evAddBefore,
+      remove: evRemove,
+      removeBefore: evRemoveBefore
+    },
+
     init(config = {}) {
       c = { ...defaults, ...config };
 
@@ -46,7 +81,7 @@ export default () => {
      * @param {String} id Device id
      * @param {String} width Width of the device
      * @param {Object} [options] Custom options
-     * @returns {Device} Added device
+     * @returns {[Device]} Added device
      * @example
      * deviceManager.add('tablet', '900px');
      * deviceManager.add('tablet2', '900px', {
@@ -69,7 +104,8 @@ export default () => {
 
     /**
      * Return device by name
-     * @param  {string} name Name of the device
+     * @param  {String} name Name of the device
+     * @returns {[Device]}
      * @example
      * var device = deviceManager.get('Tablet');
      * console.log(JSON.stringify(device));
diff --git a/src/device_manager/model/Device.js b/src/device_manager/model/Device.js
index 07077470e..b9e5519fb 100644
--- a/src/device_manager/model/Device.js
+++ b/src/device_manager/model/Device.js
@@ -1,24 +1,24 @@
-import Backbone from 'backbone';
+import { Model } from 'backbone';
 
-export default Backbone.Model.extend({
-  idAttribute: 'name',
+export default class Device extends Model {
+  defaults() {
+    return {
+      name: '',
 
-  defaults: {
-    name: '',
+      // Width to set for the editor iframe
+      width: null,
 
-    // Width to set for the editor iframe
-    width: null,
+      // Height to set for the editor iframe
+      height: '',
 
-    // Height to set for the editor iframe
-    height: '',
+      // The width which will be used in media queries,
+      // If empty the width will be used
+      widthMedia: null,
 
-    // The width which will be used in media queries,
-    // If empty the width will be used
-    widthMedia: null,
-
-    // Setup the order of media queries
-    priority: null
-  },
+      // Setup the order of media queries
+      priority: null
+    };
+  }
 
   initialize() {
     this.get('widthMedia') === null &&
@@ -28,11 +28,19 @@ export default Backbone.Model.extend({
       this.set('priority', parseFloat(this.get('widthMedia')) || 0);
     const toCheck = ['width', 'height', 'widthMedia'];
     toCheck.forEach(prop => this.checkUnit(prop));
-  },
+  }
+
+  /**
+   * Get device width.
+   * @returns {String}
+   */
+  getWidth() {
+    return this.get('width');
+  }
 
   checkUnit(prop) {
     const pr = this.get(prop) || '';
     const noUnit = (parseFloat(pr) || 0).toString() === pr.toString();
     noUnit && this.set(prop, `${pr}px`);
   }
-});
+}
diff --git a/src/editor/index.js b/src/editor/index.js
index 3b2fc8b6b..8f2af9103 100644
--- a/src/editor/index.js
+++ b/src/editor/index.js
@@ -96,6 +96,8 @@
  * * `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
+ * ### Devices
+ * Check the [Devices](/api/devices.html) module.
  * ### Parser
  * Check the [Parser](/api/parser.html) module.
  * ### Pages