diff --git a/browser/devtools/webide/content/webide.js b/browser/devtools/webide/content/webide.js
index 4d2122999472..0099396b6919 100644
--- a/browser/devtools/webide/content/webide.js
+++ b/browser/devtools/webide/content/webide.js
@@ -17,6 +17,7 @@ const {AppProjects} = require("devtools/app-manager/app-projects");
 const {Connection} = require("devtools/client/connection-manager");
 const {AppManager} = require("devtools/app-manager");
 const {Promise: promise} = Cu.import("resource://gre/modules/Promise.jsm", {});
+const ProjectEditor = require("projecteditor/projecteditor");
 
 const Strings = Services.strings.createBundle("chrome://webide/content/webide.properties");
 
@@ -268,22 +269,65 @@ let UI = {
     }
   },
 
-  // details.xhtml
+  // ProjectEditor & details screen
+
+  getProjectEditor: function() {
+    if (this.projecteditor) {
+      return this.projecteditor.loaded;
+    }
+
+    let projecteditorIframe = document.querySelector("#projecteditor");
+    this.projecteditor = ProjectEditor.ProjectEditor(projecteditorIframe);
+    this.projecteditor.on("onEditorSave", (editor, resource) => {
+      AppManager.validateProject(AppManager.selectedProject);
+    });
+    return this.projecteditor.loaded;
+  },
+
+  isProjectEditorEnabled: function() {
+    return Services.prefs.getBoolPref("devtools.webide.showProjectEditor");
+  },
 
   openProject: function() {
-    let details = document.querySelector("#details");
+    let detailsIframe = document.querySelector("#details");
+    let projecteditorIframe = document.querySelector("#projecteditor");
+
     let project = AppManager.selectedProject;
 
+    // Nothing to show
+
     if (!project) {
-      details.setAttribute("hidden", "true");
+      detailsIframe.setAttribute("hidden", "true");
+      projecteditorIframe.setAttribute("hidden", "true");
+      document.commandDispatcher.focusedElement = document.documentElement;
       return;
     }
 
+    // Show only the details screen
+
+    if (project.type != "packaged" || !this.isProjectEditorEnabled()) {
+      detailsIframe.removeAttribute("hidden");
+      projecteditorIframe.setAttribute("hidden", "true");
+      document.commandDispatcher.focusedElement = document.documentElement;
+      return;
+    }
+
+    // Show ProjectEditor
+
+    detailsIframe.setAttribute("hidden", "true");
+    projecteditorIframe.removeAttribute("hidden");
+
+    this.getProjectEditor().then((projecteditor) => {
+      projecteditor.setProjectToAppPath(project.location, {
+        name: project.name,
+        iconUrl: project.icon,
+        projectOverviewURL: "chrome://webide/content/details.xhtml"
+      });
+    }, UI.console.error);
+
     if (project.location) {
       Services.prefs.setCharPref("devtools.webide.lastprojectlocation", project.location);
     }
-
-    details.removeAttribute("hidden");
   },
 
   /********** COMMANDS **********/
diff --git a/browser/devtools/webide/content/webide.xul b/browser/devtools/webide/content/webide.xul
index 60f7709bb7b3..d6b52931c2ca 100644
--- a/browser/devtools/webide/content/webide.xul
+++ b/browser/devtools/webide/content/webide.xul
@@ -150,6 +150,7 @@
 
   <vbox flex="1" id="body">
     <iframe id="details" flex="1" hidden="true" src="details.xhtml"/>
+    <iframe id="projecteditor" flex="1" hidden="true"/>
   </vbox>
 
   <splitter hidden="true" class="devtools-horizontal-splitter" orient="vertical"/>
diff --git a/browser/devtools/webide/webide-prefs.js b/browser/devtools/webide/webide-prefs.js
index 92ab6fc47df9..41dbec3cdf7b 100644
--- a/browser/devtools/webide/webide-prefs.js
+++ b/browser/devtools/webide/webide-prefs.js
@@ -3,4 +3,5 @@
 # License, v. 2.0. If a copy of the MPL was not distributed with this
 # file, You can obtain one at http://mozilla.org/MPL/2.0/.
 
+pref("devtools.webide.showProjectEditor", true);
 pref("devtools.webide.templatesURL", "http://fixme/");