diff --git a/src/editor/EditorStartup.js b/src/editor/EditorStartup.js
index a6808631..c12de021 100644
--- a/src/editor/EditorStartup.js
+++ b/src/editor/EditorStartup.js
@@ -74,34 +74,34 @@ class EditorStartup {
     this.$svgEditor.style.visibility = 'hidden';
     try {
       // add editor components to the DOM
-      document.body.append(editorTemplate.content.cloneNode(true));
+      this.$svgEditor.append(editorTemplate.content.cloneNode(true));
       // Image props dialog added to DOM
       const newSeImgPropDialog = document.createElement('se-img-prop-dialog');
       newSeImgPropDialog.setAttribute('id', 'se-img-prop');
-      document.body.append(newSeImgPropDialog);
+      this.$svgEditor.append(newSeImgPropDialog);
       newSeImgPropDialog.init(this.i18next);
       // editor prefences dialoag added to DOM
       const newSeEditPrefsDialog = document.createElement('se-edit-prefs-dialog');
       newSeEditPrefsDialog.setAttribute('id', 'se-edit-prefs');
-      document.body.append(newSeEditPrefsDialog);
+      this.$svgEditor.append(newSeEditPrefsDialog);
       newSeEditPrefsDialog.init(this.i18next);
       // canvas menu added to DOM
       const dialogBox = document.createElement('se-cmenu_canvas-dialog');
       dialogBox.setAttribute('id', 'se-cmenu_canvas');
-      document.body.append(dialogBox);
+      this.$svgEditor.append(dialogBox);
       dialogBox.init(this.i18next);
       // alertDialog added to DOM
       const alertBox = document.createElement('se-alert-dialog');
       alertBox.setAttribute('id', 'se-alert-dialog');
-      document.body.append(alertBox);
+      this.$svgEditor.append(alertBox);
       // promptDialog added to DOM
       const promptBox = document.createElement('se-prompt-dialog');
       promptBox.setAttribute('id', 'se-prompt-dialog');
-      document.body.append(promptBox);
+      this.$svgEditor.append(promptBox);
       // Export dialog added to DOM
       const exportDialog = document.createElement('se-export-dialog');
       exportDialog.setAttribute('id', 'se-export-dialog');
-      document.body.append(exportDialog);
+      this.$svgEditor.append(exportDialog);
       exportDialog.init(this.i18next);
     } catch (err) {
       console.error(err);
diff --git a/src/editor/Rulers.js b/src/editor/Rulers.js
index 7fe74d3e..c263214f 100644
--- a/src/editor/Rulers.js
+++ b/src/editor/Rulers.js
@@ -18,7 +18,7 @@ class Rulers {
     this.svgCanvas = editor.svgCanvas;
     this.editor = editor;
     // add rulers component to the DOM
-    document.body.append(rulersTemplate.content.cloneNode(true));
+    this.editor.$svgEditor.append(rulersTemplate.content.cloneNode(true));
   }
   /**
    * @type {Module}
diff --git a/src/editor/extensions/ext-grid/ext-grid.js b/src/editor/extensions/ext-grid/ext-grid.js
index 36959050..3a5e2ca5 100644
--- a/src/editor/extensions/ext-grid/ext-grid.js
+++ b/src/editor/extensions/ext-grid/ext-grid.js
@@ -40,7 +40,7 @@ export default {
     let showGrid = svgEditor.configObj.curConfig.showGrid || false;
 
     hcanvas.style.display = 'none';
-    document.body.appendChild(hcanvas);
+    svgEditor.$svgEditor.appendChild(hcanvas);
 
     const canvasGrid = svgdoc.createElementNS(NS.SVG, 'svg');
     assignAttributes(canvasGrid, {
diff --git a/src/editor/extensions/ext-storage/ext-storage.js b/src/editor/extensions/ext-storage/ext-storage.js
index d75e985e..739acb68 100644
--- a/src/editor/extensions/ext-storage/ext-storage.js
+++ b/src/editor/extensions/ext-storage/ext-storage.js
@@ -82,7 +82,7 @@ export default {
     // storageDialog added to DOM
     const storageBox = document.createElement('se-storage-dialog');
     storageBox.setAttribute('id', 'se-storage-dialog');
-    document.body.append(storageBox);
+    svgEditor.$svgEditor.append(storageBox);
     storageBox.init(svgEditor.i18next);
 
     // manage the change in the storageDialog
diff --git a/src/editor/panels/LayersPanel.js b/src/editor/panels/LayersPanel.js
index 7786452a..3b65be82 100644
--- a/src/editor/panels/LayersPanel.js
+++ b/src/editor/panels/LayersPanel.js
@@ -149,13 +149,13 @@ class LayersPanel {
     menuMore.setAttribute("id", "se-cmenu-layers-more");
     menuMore.value = "layer_moreopts";
     menuMore.setAttribute("leftclick", true);
-    document.body.append(menuMore);
+    this.editor.$svgEditor.append(menuMore);
     menuMore.init(i18next);
     const menuLayerBox = document.createElement("se-cmenu-layers");
     menuLayerBox.setAttribute("id", "se-cmenu-layers-list");
     menuLayerBox.value = "layerlist";
     menuLayerBox.setAttribute("leftclick", false);
-    document.body.append(menuLayerBox);
+    this.editor.$svgEditor.append(menuLayerBox);
     menuLayerBox.init(i18next);
     document
       .getElementById("layer_new")
diff --git a/src/editor/panels/TopPanel.js b/src/editor/panels/TopPanel.js
index 6e36ce6f..c9fb49f7 100644
--- a/src/editor/panels/TopPanel.js
+++ b/src/editor/panels/TopPanel.js
@@ -996,7 +996,7 @@ class TopPanel {
       "se-svg-source-editor-dialog"
     );
     newSeEditorDialog.setAttribute("id", "se-svg-editor-dialog");
-    document.body.append(newSeEditorDialog);
+    this.editor.$svgEditor.append(newSeEditorDialog);
     newSeEditorDialog.init(i18next);
     // register action to top panel buttons
     $id("tool_source").addEventListener(