diff --git a/editor/editor.php b/editor/editor.php
index d496d1f0caa09783338ec9f1287d9fc85c4216a3..cf25e164112e41f358fbbf4112f7a006dc3a1e13 100644
--- a/editor/editor.php
+++ b/editor/editor.php
@@ -93,6 +93,26 @@
             </br>
             <input type="number" onkeypress="return (event.charCode !=8 && event.charCode ==0 || (event.charCode >= 48 && event.charCode <= 57))" value="5" id="stop-physics-delay" name="stop-physics-delay" class="small-width">
             </input>
+            </br>
+            </br>
+
+
+            <h3>Import Space</h3>
+            <label for="import-space-area">Space JSON</label>
+            </br>
+            <textarea id="import-space-area" name="import-space-area" class="bottom-space">
+            </textarea>
+            </br>
+            <label for="import-space-name-text">Space Name</label>
+            </br>
+            <input type="text" id="import-space-name-text" name="import-space-name-text" class="bottom-space">
+            </input>
+            </br>
+            <button id="import-space-btn" name="import-space-btn" class="bottom-space">Import</button>
+
+            </br>
+            </br>
+
         </div>
     </section>
 </div>
\ No newline at end of file
diff --git a/editor/js/interactions.js b/editor/js/interactions.js
index d24fec2652d2f9940210fa5f13021cf0fe201f6e..f493e1c2e497df96cb09de3a2ae3bfd1c9f71cc6 100644
--- a/editor/js/interactions.js
+++ b/editor/js/interactions.js
@@ -1,6 +1,6 @@
 import jQuery from "jquery";
 import { state } from "./editor";
-import { listAllSpaces } from "../../datasets/datasets";
+import { listAllSpaces, saveGraphJson } from "../../datasets/datasets";
 import { SPACE } from "../../config";
 
 /**
@@ -11,18 +11,62 @@ export function initInteractions() {
         state.clearSelectedItems();
     });
 
-    // Fill space dropdown
+    jQuery("button#import-space-btn").on("click", () =>
+        importSpaceFromInterface()
+    );
+    loadSpacesList();
+}
+
+function loadSpacesList() {
     var selectContainer = jQuery("#space-id-select");
+    selectContainer.empty();
     listAllSpaces().then((spaces) => {
-        spaces.forEach(space => {
+        spaces.forEach((space) => {
             var selectedTxt = "";
             if (space === SPACE) {
                 selectedTxt = "selected ";
             }
 
-            var child = "<option " + selectedTxt + "value=\"" + space + "\">" + space + "</option>"
+            var child =
+                "<option " +
+                selectedTxt +
+                'value="' +
+                space +
+                '">' +
+                space +
+                "</option>";
             selectContainer.append(child);
         });
     });
     selectContainer.val(SPACE);
 }
+
+function importSpaceFromInterface() {
+    var json = undefined;
+    try {
+        console.log(jQuery("#import-space-area").val());
+        json = JSON.parse(jQuery("#import-space-area").val());
+    } catch (e) {
+        console.log(e);
+        alert('"Space JSON" not valid. Check console for details.');
+        return;
+    }
+
+    var spaceName = jQuery("#import-space-name-text").val();
+    if (spaceName.length == 0) {
+        alert('"Space Name" cannot be empty.');
+        return;
+    }
+
+    saveGraphJson(spaceName, json)
+        .then(() => {
+            loadSpacesList();
+            alert("Space imported!");
+        })
+        .catch((ex) => {
+            console.log(ex);
+            alert(
+                "Something went wrong, could not import space. Check console for further details."
+            );
+        });
+}