2 files changed, 157 insertions, 7 deletions

diff --git a/js/ninja.reel/ninja.html b/js/ninja.reel/ninja.html
index a98fca60..a63422fb 100755
--- a/js/ninja.reel/ninja.html
+++ b/js/ninja.reel/ninja.html
@@ -163,7 +163,7 @@
                     "element": {"#": "stageMode"}
                 },
                 "bindings" : {
-                    "livePreview": {"<<->": "@appModel.livePreview"}
+                    "livePreview": {"<->": "@appModel.livePreview"}
                 }
             },
 
@@ -310,7 +310,7 @@
                     "selectObjectsOnAddition": true
                 },
                 "bindings": {
-                    "content": {"<<->": "@documentController.documents"}
+                    "content": {"<->": "@documentController.documents"}
                 }
             },
 
diff --git a/js/ninja.reel/ninja.js b/js/ninja.reel/ninja.js
index 38f5efcf..33808cf3 100755
--- a/js/ninja.reel/ninja.js
+++ b/js/ninja.reel/ninja.js
@@ -15,22 +15,172 @@ var NjUtils = require("js/lib/NJUtils").NJUtils;
 
 exports.Ninja = Montage.create(Component, {
 
-    ninjaVersion: {
-        value: null
+    // SERIALIZABLE Properties
+    //////////////////////////////
+    rulerTop: {
+        value: null,
+        serializable: true
+    },
+
+    rulerLeft: {
+        value: null,
+        serializable: true
+    },
+
+    appModel: {
+        value: null,
+        serializable: true
     },
 
     toolsData: {
-        value: null
+        value: null,
+        serializable: true
     },
 
-    appData: {
-        value: AppData
+    toolsList: {
+        value: null,
+        serializable: true
+    },
+
+    toolsProperties: {
+        value: null,
+        serializable: true
+    },
+
+    stage: {
+        value: null,
+        serializable: true
+    },
+
+    elementMediator: {
+        value: null,
+        serializable: true
+    },
+
+    dragDropMediator: {
+        value: null,
+        serializable: true
+    },
+
+    undocontroller: {
+        value: null,
+        serializable: true
+    },
+
+    selectionController: {
+        value: null,
+        serializable: true
+    },
+
+    documentController: {
+        value: null,
+        serializable: true
+    },
+
+    popupManager: {
+        value: null,
+        serializable: true
+    },
+
+    colorController: {
+        value: null,
+        serializable: true
+    },
+
+    stylesController: {
+        value: null,
+        serializable: true
+    },
+
+    presetsController: {
+        value: null,
+        serializable: true
+    },
+
+    filePickerController: {
+        value: null,
+        serializable: true
+    },
+
+    newFileController: {
+        value: null,
+        serializable: true
+    },
+
+    coreIoApi: {
+        value: null,
+        serializable: true
+    },
+
+    documentBar: {
+        value: null,
+        serializable: true
+    },
+
+    editorViewOptions: {
+        value: null,
+        serializable: true
+    },
+
+    ioMediator: {
+        value: null,
+        serializable: true
+    },
+
+    timeline: {
+        value: null,
+        serializable: true
+    },
+
+    mainMenuController: {
+        value: null,
+        serializable: true
+    },
+
+    codeEditorController: {
+        value: null,
+        serializable: true
+    },
+
+    rightPanelContainer: {
+        value: null,
+        serializable: true
+    },
+
+    panelSplitter: {
+        value: null,
+        serializable: true
+    },
+
+    timelineSplitter: {
+        value: null,
+        serializable: true
+    },
+
+    toolsSplitter: {
+        value: null,
+        serializable: true
+    },
+
+    optionsSplitter: {
+        value: null,
+        serializable: true
     },
 
     documentList: {
+        value: null,
+        serializable: true
+    },
+    //////////////////////////////
+
+    ninjaVersion: {
         value: null
     },
 
+    appData: {
+        value: AppData
+    },
+
     currentDocument: {
         get: function() {
             if(this.documentList.selectedObjects) {