diff --git a/src/dom_components/index.js b/src/dom_components/index.js
index 6f31405d1..4f7b1dd8c 100644
--- a/src/dom_components/index.js
+++ b/src/dom_components/index.js
@@ -25,7 +25,7 @@
  * @module DomComponents
  */
 
-import { isEmpty } from 'underscore';
+import { isEmpty, isString, isObject, isArray } from 'underscore';
 
 module.exports = () => {
   var c = {};
@@ -301,18 +301,27 @@ module.exports = () => {
      * @return {Object} Loaded data
      */
     load(data = '') {
+      const { em } = this;
       let result = '';
 
       if (!data && c.stm) {
         data = c.em.getCacheLoad();
       }
 
-      if (data.components) {
-        try {
-          result = JSON.parse(data.components);
-        } catch (err) {}
-      } else if (data.html) {
-        result = data.html;
+      const { components, html } = data;
+
+      if (components) {
+        if (isObject(components) || isArray(components)) {
+          result = components;
+        } else {
+          try {
+            result = JSON.parse(components);
+          } catch (err) {
+            em && em.logError(err);
+          }
+        }
+      } else if (html) {
+        result = html;
       }
 
       const isObj = result && result.constructor === Object;
diff --git a/src/editor/model/Editor.js b/src/editor/model/Editor.js
index 6735cdb5c..141392dd3 100644
--- a/src/editor/model/Editor.js
+++ b/src/editor/model/Editor.js
@@ -631,6 +631,18 @@ module.exports = Backbone.Model.extend({
     }
   },
 
+  logInfo(msg, opts) {
+    this.log(msg, { ...opts, level: 'info' });
+  },
+
+  logWarning(msg, opts) {
+    this.log(msg, { ...opts, level: 'warning' });
+  },
+
+  logError(msg, opts) {
+    this.log(msg, { ...opts, level: 'error' });
+  },
+
   /**
    * Set/get data from the HTMLElement
    * @param  {HTMLElement} el
diff --git a/test/specs/dom_components/index.js b/test/specs/dom_components/index.js
index c0c7d6fdd..34b9b31ec 100644
--- a/test/specs/dom_components/index.js
+++ b/test/specs/dom_components/index.js
@@ -98,6 +98,33 @@ describe('DOM Components', () => {
       expect(obj.load()).toEqual([{ test: 1 }]);
     });
 
+    test('Load data with components as a string', () => {
+      const result = [{}, {}];
+      expect(
+        obj.load({
+          components: '[{}, {}]'
+        })
+      ).toEqual(result);
+    });
+
+    test('Load data with components as an array', () => {
+      const result = [{}, {}];
+      expect(
+        obj.load({
+          components: result
+        })
+      ).toEqual(result);
+    });
+
+    test('Load data with components as an object', () => {
+      const result = {};
+      expect(
+        obj.load({
+          components: result
+        })
+      ).toEqual(result);
+    });
+
     test('Wrapper exists', () => {
       expect(obj.getWrapper()).toBeTruthy();
     });