diff --git a/docs/modules/Components.md b/docs/modules/Components.md
index 3dcadd895..dad7cabe4 100644
--- a/docs/modules/Components.md
+++ b/docs/modules/Components.md
@@ -106,7 +106,14 @@ If you're importing big chunks of HTML code you might want to improve the perfor
 
 ### Component creation and rendering
 
-Once the **Component Definition**
+Once the **Component Definition** is ready and the type is assigned, the Component intance can be created. Let's step back to our previous example with the HTML string, the result of the `append` method is an array of added components.
+
+```js
+const component = editor.addComponents(`<div>
+  <img src="https://path/image" />
+  <span title="foo">Hello world!!!</span>
+</div>`)[0];
+```
 
 --- OLD
 
diff --git a/src/editor/index.js b/src/editor/index.js
index fad6a444b..06378f0d8 100644
--- a/src/editor/index.js
+++ b/src/editor/index.js
@@ -337,7 +337,7 @@ export default (config = {}) => {
      * @param {Boolean} [opts.avoidUpdateStyle=false] 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.
-     * @return {Model|Array<Model>}
+     * @return {Array<Component>}
      * @example
      * editor.addComponents('<div class="cls">New component</div>');
      * // or
@@ -348,7 +348,7 @@ export default (config = {}) => {
      * });
      */
     addComponents(components, opts) {
-      return this.getComponents().add(components, opts);
+      return this.getWrapper().append(components, opts);
     },
 
     /**