diff --git a/src/dom_components/model/Component.js b/src/dom_components/model/Component.js
index c6ae5e544..e63eb7b00 100644
--- a/src/dom_components/model/Component.js
+++ b/src/dom_components/model/Component.js
@@ -767,9 +767,18 @@ const Component = Backbone.Model.extend(Styleable).extend(
       return { tagName: el.tagName ? el.tagName.toLowerCase() : '' };
     },
 
+    /**
+     * Relying simply on the number of components becomes a problem when you
+     * store and load them back, you might hit collisions with new components
+     * @param  {Model} model
+     * @return {string}
+     */
     createId(model) {
       componentIndex++;
-      const nextId = 'i' + componentIndex;
+      // Testing 1000000 components with `+ 2` returns 0 collisions
+      const ilen = componentIndex.toString().length + 2;
+      const uid = (Math.random() + 1.1).toString(36).slice(-ilen);
+      const nextId = 'i' + uid;
       componentList[nextId] = model;
       return nextId;
     },
diff --git a/src/editor/index.js b/src/editor/index.js
index 9529c7d29..13ee27408 100644
--- a/src/editor/index.js
+++ b/src/editor/index.js
@@ -47,6 +47,9 @@
  * * `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
  * ## Selectors
  * * `selector:add` - Triggers when a new selector/class is created
  * ## RTE