diff --git a/index.html b/index.html
index 5ee30c738..9fbfcfe24 100755
--- a/index.html
+++ b/index.html
@@ -14,6 +14,11 @@
 	<body>
 
 		<div id="gjs" style="height:0px; overflow:hidden">
+			<form action="##">
+				<input name="name" placeholder="Name" class="sub-input">
+				<input name="email" placeholder="Email" class="sub-input" type="email">
+				<button class="sub-btn">Submit</button>
+			</form>
 			<header class="header-banner">
 				<div class="container-width">
 					<!--
diff --git a/src/demo.js b/src/demo.js
index 0cf72e52c..c2dcf04c0 100644
--- a/src/demo.js
+++ b/src/demo.js
@@ -333,6 +333,9 @@ require(['config/require-config'], function() {
 
     window.editor = editor;
 
+		
+
+
 		editor.render();
 	});
 });
diff --git a/src/dom_components/main.js b/src/dom_components/main.js
index f202ceed1..f9591547f 100644
--- a/src/dom_components/main.js
+++ b/src/dom_components/main.js
@@ -42,6 +42,7 @@ define(function(require) {
 		ComponentView = require('./view/ComponentView');
 
 		var component, componentView;
+		/*
 		var defaultTypes = {
 			'cell': {
 				model: require('./model/ComponentTableCell'),
@@ -84,6 +85,59 @@ define(function(require) {
 				view: ComponentView,
 			},
 		};
+		*/
+		var defaultTypes = [
+			{
+				id: 'cell',
+				model: require('./model/ComponentTableCell'),
+				view: require('./view/ComponentTableCellView'),
+			},
+			{
+				id: 'row',
+				model: require('./model/ComponentTableRow'),
+				view: require('./view/ComponentTableRowView'),
+			},
+			{
+				id: 'table',
+				model: require('./model/ComponentTable'),
+				view: require('./view/ComponentTableView'),
+			},
+			{
+				id: 'map',
+				model: require('./model/ComponentMap'),
+				view: require('./view/ComponentMapView'),
+			},
+			{
+				id: 'link',
+				model: require('./model/ComponentLink'),
+				view: require('./view/ComponentLinkView'),
+			},
+			{
+				id: 'video',
+				model: require('./model/ComponentVideo'),
+				view: require('./view/ComponentVideoView'),
+			},
+			{
+				id: 'image',
+				model: require('./model/ComponentImage'),
+				view: require('./view/ComponentImageView'),
+			},
+			{
+				id: 'textnode',
+				model: require('./model/ComponentTextNode'),
+				view: require('./view/ComponentTextNodeView'),
+			},
+			{
+				id: 'text',
+				model: require('./model/ComponentText'),
+				view: require('./view/ComponentTextView'),
+			},
+			{
+				id: 'default',
+				model: Component,
+				view: ComponentView,
+			},
+		];
 
 	  return {
 
@@ -96,6 +150,15 @@ define(function(require) {
        */
       name: 'DomComponents',
 
+			/**
+			 * Returns config
+			 * @return {Object} Config object
+			 * @private
+			 */
+			getConfig: function () {
+					return c;
+			},
+
       /**
        * Mandatory for the storage manager
        * @type {String}
@@ -146,7 +209,11 @@ define(function(require) {
 					componentTypes: componentTypes,
 				});
 				component.set({ attributes: {id: 'wrapper'}});
-				component.get('components').add(c.components);
+
+				if(c.em && !c.em.config.loadCompsOnRender) {
+					component.get('components').add(c.components);
+				}
+
 			  componentView = new ComponentView({
 					model: component,
 					config: c,
@@ -338,8 +405,14 @@ define(function(require) {
 			 * @private
 			 */
 			addType: function(type, methods) {
-				defaultTypes[type] = methods;
-				return this;
+				var compType = this.getType(type);
+				if(compType) {
+					compType.model = methods.model;
+					compType.view = methods.view;
+				} else {
+					methods.id = type;
+					defaultTypes.unshift(methods);
+				}
 			},
 
 			/**
@@ -348,7 +421,15 @@ define(function(require) {
 			 * @private
 			 */
 			getType: function(type) {
-				return defaultTypes[type];
+				var df = defaultTypes;
+
+				for (var it = 0; it < df.length; it++) {
+					var dfId = df[it].id;
+					if(dfId == type) {
+						return df[it];
+					}
+				}
+				return;
 			},
 
 		};
diff --git a/src/dom_components/model/Components.js b/src/dom_components/model/Components.js
index a12ef5961..58e1b7b1b 100644
--- a/src/dom_components/model/Components.js
+++ b/src/dom_components/model/Components.js
@@ -29,13 +29,26 @@ define([ 'backbone', 'require'],
 							options.componentTypes = opt.componentTypes;
 
 					var df = opt.defaultTypes;
-					var cf = opt.componentTypes;
 
+					for (var it = 0; it < df.length; it++) {
+						var dfId = df[it].id;
+						if(dfId == attrs.type) {
+							model = df[it].model;
+							break;
+						}
+					}
+
+					if(!model) {
+						// get the last one
+						model = df[df.length - 1].model;
+					}
+
+					/*
 					if(df[attrs.type]){
 						model = df[attrs.type].model;
 					}else{
 						model = df.default.model;
-					}
+					}*/
 
 					return new model(attrs, options);
 				};
diff --git a/src/dom_components/view/ComponentsView.js b/src/dom_components/view/ComponentsView.js
index ae2b73146..70b8ce795 100644
--- a/src/dom_components/view/ComponentsView.js
+++ b/src/dom_components/view/ComponentsView.js
@@ -46,7 +46,15 @@ function(Backbone, require) {
 			var ct = this.opts.componentTypes;
 
 			var type = model.get('type');
-			viewObject = dt[type] ? dt[type].view : dt.default.view;
+
+			for (var it = 0; it < dt.length; it++) {
+				var dtId = dt[it].id;
+				if(dtId == type) {
+					viewObject = dt[it].view;
+					break;
+				}
+			}
+			//viewObject = dt[type] ? dt[type].view : dt.default.view;
 
 			var view = new viewObject({
 				model: model,
diff --git a/src/editor/config/config.js b/src/editor/config/config.js
index a2e5969b5..c41fa6a63 100644
--- a/src/editor/config/config.js
+++ b/src/editor/config/config.js
@@ -42,6 +42,10 @@ define(function () {
 		// When enabled, on device change media rules won't be created
 		devicePreviewMode: 0,
 
+		// This option makes available custom component types also for loaded
+		// elements inside canvas
+		loadCompsOnRender: 1,
+
 		// Dom element
 		el: '',
 
diff --git a/src/editor/view/EditorView.js b/src/editor/view/EditorView.js
index bf1fdc93a..971b122ec 100644
--- a/src/editor/view/EditorView.js
+++ b/src/editor/view/EditorView.js
@@ -15,6 +15,15 @@ function(Backbone){
 		},
 
 		render: function() {
+			var model = this.model;
+			var dComps = model.get('DomComponents');
+			var config = model.get('Config');
+
+			if(config.loadCompsOnRender) {
+				dComps.getComponents().add(config.components);
+				dComps.onLoad();
+			}
+
 			var conf = this.conf;
 			var contEl = $(conf.el || ('body ' + conf.container));
 			this.$el.empty();
@@ -26,7 +35,7 @@ function(Backbone){
 				contEl.css('height', conf.height);
 
 			// Canvas
-			this.$el.append(this.model.get('Canvas').render());
+			this.$el.append(model.get('Canvas').render());
 
 			// Panels
 			this.$el.append(this.pn.render());
diff --git a/src/parser/model/ParserHtml.js b/src/parser/model/ParserHtml.js
index 734442872..764421e77 100644
--- a/src/parser/model/ParserHtml.js
+++ b/src/parser/model/ParserHtml.js
@@ -59,7 +59,7 @@ define(function(require) {
        * @param  {HTMLElement} el DOM
        * @return {Array<Object>}
        */
-      parseNode: function(el){
+      parseNode: function(el) {
         var result = [];
         var nodes = el.childNodes;
 
@@ -74,12 +74,20 @@ define(function(require) {
 
           if(ct){
             var obj = '';
+            /*
             for (var cType in ct) {
               var component = ct[cType].model;
               obj = component.isComponent(node);
               if(obj)
                 break;
+            }*/
+            for (var it = 0; it < ct.length; it++) {
+              var component = ct[it].model;
+              obj = component.isComponent(node);
+              if(obj)
+                break;
             }
+
             model = obj;
           }
 
diff --git a/src/utils/Sorter.js b/src/utils/Sorter.js
index f9ec4457b..57e3baa1c 100644
--- a/src/utils/Sorter.js
+++ b/src/utils/Sorter.js
@@ -134,8 +134,10 @@ define(function(require) {
        * @param {String} selector
        * @return {Boolean}
        */
-      matches: function(el, selector){
-        var els = (el.parentNode || document.body).querySelectorAll(selector);
+      matches: function(el, selector, useBody) {
+        var startEl = el.parentNode || document.body;
+        //startEl = useBody ? startEl.ownerDocument.body : startEl;
+        var els = startEl.querySelectorAll(selector);
         var i = 0;
         while (els[i] && els[i] !== el)
           ++i;
@@ -611,7 +613,7 @@ define(function(require) {
           draggable = this.matches(dst, toDrag);
         }else if(typeof draggable === 'string') {
           toDrag = draggable;
-          draggable = this.matches(dst, toDrag);
+          draggable = this.matches(dst, toDrag, 1);
         }
 
         // Check if the target could accept the element to be DROPPED inside
