Add new commands and they relative keymaps for easy navigate through the structure:

* `core:component-prev` (w)
* `core:component-next` (s)
* `core:component-enter` (d)
* `core:component-exit` (a)

src/commands/index.js

@@ -199,6 +199,18 @@ module.exports = () => {
       defaultCommands['core:redo'] = e => e.UndoManager.redo();
       defaultCommands['core:copy'] = require('./view/CopyComponent').run;
       defaultCommands['core:paste'] = require('./view/PasteComponent').run;
+      defaultCommands[
+        'core:component-next'
+      ] = require('./view/ComponentNext').run;
+      defaultCommands[
+        'core:component-prev'
+      ] = require('./view/ComponentPrev').run;
+      defaultCommands[
+        'core:component-enter'
+      ] = require('./view/ComponentEnter').run;
+      defaultCommands[
+        'core:component-exit'
+      ] = require('./view/ComponentExit').run;
       defaultCommands['core:canvas-clear'] = e => {
         e.DomComponents.clear();
         e.CssComposer.clear();

src/commands/view/ComponentEnter.js

@@ -0,0 +1,13 @@
+module.exports = {
+  run(ed) {
+    const toSelect = [];
+
+    ed.getSelectedAll().forEach(component => {
+      const coll = component.components();
+      const next = coll && coll.at(0);
+      next && toSelect.push(next);
+    });
+
+    toSelect.length && ed.select(toSelect);
+  }
+};

src/commands/view/ComponentExit.js

@@ -0,0 +1,12 @@
+module.exports = {
+  run(ed) {
+    const toSelect = [];
+
+    ed.getSelectedAll().forEach(component => {
+      const next = component.parent();
+      next && toSelect.push(next);
+    });
+
+    toSelect.length && ed.select(toSelect);
+  }
+};

src/commands/view/ComponentNext.js

@@ -0,0 +1,14 @@
+module.exports = {
+  run(ed) {
+    const toSelect = [];
+
+    ed.getSelectedAll().forEach(component => {
+      const coll = component.collection;
+      const at = coll.indexOf(component);
+      const next = coll.at(at + 1);
+      toSelect.push(next || component);
+    });
+
+    toSelect.length && ed.select(toSelect);
+  }
+};

src/commands/view/ComponentPrev.js

@@ -0,0 +1,14 @@
+module.exports = {
+  run(ed) {
+    const toSelect = [];
+
+    ed.getSelectedAll().forEach(component => {
+      const coll = component.collection;
+      const at = coll.indexOf(component);
+      const next = coll.at(at - 1);
+      toSelect.push(next && at - 1 >= 0 ? next : component);
+    });
+
+    toSelect.length && ed.select(toSelect);
+  }
+};

src/dom_components/model/Component.js

@@ -460,10 +460,10 @@ const Component = Backbone.Model.extend(Styleable).extend(
      * @param {Object} [opts={}] Options, same as in `model.add()`(from backbone)
      * @return {Array} Array of appended components
      * @example
-     * someModel.get('components').lenght // -> 0
+     * someModel.get('components').length // -> 0
      * const videoComponent = someModel.append('<video></video><div></div>')[0];
      * // This will add 2 components (`video` and `div`) to your `someModel`
-     * someModel.get('components').lenght // -> 2
+     * someModel.get('components').length // -> 2
      * // You can pass components directly
      * otherModel.append(otherModel2);
      * otherModel.append([otherModel3, otherModel4]);
@@ -652,7 +652,10 @@ const Component = Backbone.Model.extend(Styleable).extend(
         attr.style = style;
       }
 
-      return new this.constructor(attr, opts);
+      return new this.constructor(
+        attr,
+        opts
+      );
     },
 
     /**

src/keymaps/index.js

@@ -32,6 +32,22 @@ module.exports = () => {
       'core:paste': {
         keys: '⌘+v, ctrl+v',
         handler: 'core:paste'
+      },
+      'core:component-next': {
+        keys: 's',
+        handler: 'core:component-next'
+      },
+      'core:component-prev': {
+        keys: 'w',
+        handler: 'core:component-prev'
+      },
+      'core:component-enter': {
+        keys: 'd',
+        handler: 'core:component-enter'
+      },
+      'core:component-exit': {
+        keys: 'a',
+        handler: 'core:component-exit'
       }
     }
   };