diff --git a/elements/x-design-host/x-design-host.html b/elements/x-design-host/x-design-host.html
new file mode 100644
index 00000000..f8745133
--- /dev/null
+++ b/elements/x-design-host/x-design-host.html
@@ -0,0 +1,169 @@
+<polymer-element name="x-design-host">
+<script>
+(function() {
+
+  Polymer('x-design-host', {
+    
+    name: 'my-element',
+
+    ready: function() {
+      this.model = {};
+      this.treeInfo = {name: this.name, id: ''};
+    },
+
+    dumpTag: function(serializer, indent, tab) {
+      var indented = indent + tab, attrs = '';
+      var attrs = this.dumpAttributes();
+      return indent + '<polymer-element' + attrs + '>\n\n' + 
+          indented + '<template>\n' +
+          serializer.dumpChildren(this,indented + tab) +
+          indented + '</template>\n\n' +
+          indented + '<sc' + 'ript>\n\n' +
+          indented + tab + this.dumpScript(indented + tab, tab) +
+          indented + '</sc' + 'ript>\n\n' +
+          indent + '</polymer-element>';
+    },
+
+    dumpAttributes: function() {
+      var attrs = '';
+      var a$ = this.polymerElement ? this.polymerElement.attributes : 
+          [{name: 'name', value: this.name}];
+      for (var i=0, a; (a=a$[i]); i++) {
+        attrs += ' ' + a.name + '="' + a.value + '"';
+      }
+      return attrs;
+    },
+
+    dumpScript: function(indent, tab) {
+      var s = 'Polymer(\'' + this.name + '\', {\n' + indent + tab;
+      var props = [];
+      Object.keys(this.model).forEach(function(k) {
+        if (serializeScriptBlacklist.indexOf(k) < 0) {
+          props.push(serializePropertyValue(k, this.model));
+        }
+      }, this);
+      s += props.join(',\n' + indent + tab);
+      s += '\n' + indent + '});' + '\n\n';
+      return s;
+    },
+
+    loadHtml: function(html, callback) {
+      var raw = document.createElement('div');
+      raw.innerHTML = html;
+      // remove imports
+      var imports = raw.querySelectorAll('link[rel=import]').array();
+      imports.forEach(function(i) {
+        i.remove();
+      });
+      // absorb polymer-element
+      this.polymerElement = raw.querySelector('polymer-element');
+      // absorb script
+      this.scriptElement = this.polymerElement.querySelector('script');
+      this.model = this.modelFromScript(this.scriptElement);
+      // absorb template
+      var template = this.polymerElement.querySelector('template');
+      if (template) {
+        template.bindingDelegate = this.syntax;
+        // make imports go...
+        this.loadElementImports(template.content, function() {
+          this.appendChild(template.createInstance(this.model));
+          this.meta.ensureMeta(this);
+          this.marshalNodeReferences(this);
+          this.model.$ = this.$;
+          callback && callback();
+        }.bind(this));
+      } else if (callback) {
+        callback();
+      }
+    },
+
+    loadElementImports: function(element, callback) {
+      var pending = 1;
+      var receive = function() {
+        pending--;
+        checkDone();
+      }
+      var checkDone = function() {
+        if (pending == 0 && callback) {
+          callback();
+        }
+      };
+      var n$ = element.querySelectorAll('*');
+      for (var i=0, l=n$.length, n, m; (i<l) && (n=n$[i]); i++) {
+        m = this.meta.byId(n.localName);
+        if (m && !m.importsLoaded) {
+          pending++;
+          m.loadImports(receive);
+        }
+      }
+      receive();
+    },
+
+    modelFromScript: function(script) {
+      var p = executePolymerScript(script);
+      return p || {};
+    },
+
+    _getInspectorProps: function() {
+      return this.model;
+    }
+
+  });
+
+  var serializeScriptBlacklist = ['$'];
+
+  function serializePropertyValue(name, obj) {
+    var value = obj[name], type = typeof value;
+    switch(type) {
+      case 'function':
+        value = value.toString();
+        break;
+      case 'string':
+        value = '\'' + value + '\'';
+        break;
+    }
+    return name + ': ' + value;
+  }
+
+  // this is not secure, it's just intended to make it harder to accidentally
+  // mess up the main document.
+  var frame = document.createElement('iframe');
+  frame.style.display = 'none';
+  document.body.appendChild(frame);
+  frame.src = '';
+
+  function executePolymerScript(script) {
+    if (!frame.contentWindow.Polymer) {
+      frame.contentWindow.Polymer = function(name, model) {
+        var model = typeof name === 'object' ? name : model;
+        frame.contentWindow.model = model;
+      }
+    }
+    try {
+      var code = script.textContent.trim();
+      frame.contentWindow.eval(code);
+    } catch(e) {
+      console.log(e);
+    }
+    var r = frame.contentWindow.model;
+    frame.contentWindow.model = null;
+    return r;
+  }
+
+  function executeScriptsInScope(scope) {
+    // make scripts go....
+    var s$ = scope.querySelectorAll('script:not([src])');
+    for (var i=0, l=s$.length, s; (i<l) && (s=s$[i]); i++) {
+      replaceAndExecuteScript(s);
+    }
+  }
+
+  function replaceAndExecuteScript(script) {
+    var newScript = document.createElement('script');
+    script.parentNode.replaceChild(newScript, script);
+    newScript.textContent = script.textContent;
+  }
+
+})();
+</script>
+</polymer-element>
\ No newline at end of file
diff --git a/elements/x-designable/x-designable.html b/elements/x-designable/x-designable.html
index ce5776a7..5fb13c4b 100644
--- a/elements/x-designable/x-designable.html
+++ b/elements/x-designable/x-designable.html
@@ -1,4 +1,5 @@
 <link rel="import" href="../../components/polymer/polymer.html">
+<link rel="import" href="../x-design-host/x-design-host.html">
 
 <polymer-element name="x-designable" designer attributes="selected" on-keydown="{{keydown}}" on-pointerdown="{{pointerDown}}" on-pointerup="{{pointerUp}}" on-trackstart="{{trackStart}}" on-track="{{track}}" on-trackend="{{trackEnd}}">
 
@@ -29,6 +30,8 @@
 
     ready: function() {
       this.meta = document.createElement('x-meta');
+      this.makeDesignHost();
+      this.appendChild(this.designHost);
     },
 
     // communication
@@ -46,6 +49,11 @@
     },
 
     // commands
+    addElement: function(element) {
+      this.designHost.appendChild(element);
+      this.decorateElement(element);
+    },
+
     deleteElement: function() {
       var e = this.selected;
       if (e && e !== this) {
@@ -91,7 +99,6 @@
     },
 
     update: function() {
-      this.marshalNodeReferences(this);
     },
 
     //
@@ -166,7 +173,7 @@
       s.webkitTransition = null;
       // designer is absolutely positioned, ad-hoc
       s.position = 'absolute';
-      if (element.parentNode !== this) {
+      if (element.parentNode !== this.designHost) {
         s.left = s.top = s.position = '';
       }
       var self = this;
@@ -211,7 +218,7 @@
         target.removeAttribute(name);
       }
       if (path) {
-        target.bind(name, new PathObserver(this, path));
+        target.bind(name, new PathObserver(this.designHost.model, path));
       }
     },
 
@@ -311,8 +318,11 @@
     },
 
     findContainer: function(element, container) {
+      if (container === this) {
+        container = this.designHost;
+      }
       while (container) {
-        if (container === this || element !== container && container.meta && container.meta.isContainer) {
+        if (container === this.designHost || element !== container && container.meta && container.meta.isContainer) {
           return container;
         }
         container = container.parentNode;
@@ -338,7 +348,7 @@
         // nominal target
         elt = target;
         // find top level parent
-        while (elt && elt.parentNode !== this) {
+        while (elt && elt.parentNode !== this.designHost) {
           elt = elt.parentNode;
         }
       }
@@ -372,51 +382,17 @@
     editorElements: {input: 1, select: 1, textarea: 1},
 
     loadHtml: function(html) {
-      // TODO(sorvell): what should we bind to? for right now, we bind
-      // to 'this', but we should bind to some element that we're designing...
-      var template = document.createElement('template');
-      template.bindingDelegate = this.syntax;
-      template.innerHTML = html;
-      this.sanitizeContent(template.content);
       this.innerHTML = '';
-      // make imports go...
-      this.loadElementImports(template.content, function() {
-        this.appendChild(template.createInstance(this));
-        executeScriptsInScope(this);
-        this.meta.ensureMeta(this);
-        this.update();
+      this.makeDesignHost();
+      this.designHost.loadHtml(html, function() {
+        this.appendChild(this.designHost);
         this.notify();
       }.bind(this));
     },
 
-    sanitizeContent: function(element) {
-      // remove imports so that we don't have to keep track of them
-      var imports = element.querySelectorAll('link[rel=import]').array();
-      imports.forEach(function(i) {
-        i.remove();
-      });
-    },
-
-    loadElementImports: function(element, callback) {
-      var pending = 1;
-      var receive = function() {
-        pending--;
-        checkDone();
-      }
-      var checkDone = function() {
-        if (pending == 0 && callback) {
-          callback();
-        }
-      };
-      var n$ = element.querySelectorAll('*');
-      for (var i=0, l=n$.length, n, m; (i<l) && (n=n$[i]); i++) {
-        m = this.meta.byId(n.localName);
-        if (m && !m.importsLoaded) {
-          pending++;
-          m.loadImports(receive);
-        }
-      }
-      receive();
+    makeDesignHost: function() {
+      this.designHost = document.createElement('x-design-host');
+      this.designHost.meta = this.meta;
     },
 
     setupStyleElement: function() {
@@ -424,7 +400,7 @@
       if (!s) {
         s = document.createElement('style');
         s.textContent = ' ';
-        this.insertBefore(s, this.firstElementChild);
+        this.designHost.insertBefore(s, this.designHost.firstElementChild);
       }
       this.styleElement = s;
     },
@@ -451,8 +427,8 @@
       if (!rules[i]) {
         sheet.insertRule('#' + element.id + '{' + element.style.cssText + '}',
           i);
+        element.style.cssText = '';
       }
-      element.style.cssText = '';
       return rules[i];
     },
 
@@ -475,20 +451,6 @@
 
   });
 
-  function executeScriptsInScope(scope) {
-    // make scripts go....
-    var s$ = scope.querySelectorAll('script:not([src])');
-    for (var i=0, l=s$.length, s; (i<l) && (s=s$[i]); i++) {
-      replaceAndExecuteScript(s);
-    }
-  }
-
-  function replaceAndExecuteScript(script) {
-    var newScript = document.createElement('script');
-    script.parentNode.replaceChild(newScript, script);
-    newScript.textContent = script.textContent;
-  }
-
   function cssTextFromStyle(style) {
     var sheet = style && style.sheet;
     if (sheet) {
diff --git a/elements/x-designer/x-designer.html b/elements/x-designer/x-designer.html
index 2ab2de46..a87d6b7b 100644
--- a/elements/x-designer/x-designer.html
+++ b/elements/x-designer/x-designer.html
@@ -51,8 +51,7 @@
     createElement: function(tag) {
       var meta = this.$.meta.byId(tag);
       var element = meta.createElement();
-      this.$.canvas.appendChild(element);
-      this.$.canvas.decorateElement(element);
+      this.$.canvas.addElement(element);
       return element;
     },
 
diff --git a/elements/x-dom-serializer/x-dom-serializer.html b/elements/x-dom-serializer/x-dom-serializer.html
index 020b409a..b6066cfc 100644
--- a/elements/x-dom-serializer/x-dom-serializer.html
+++ b/elements/x-dom-serializer/x-dom-serializer.html
@@ -8,7 +8,7 @@
       attributesBlacklist: ['style', 'tabindex', 'role'],
       dumpTag: function(node, indent) {
         if (node.dumpTag) {
-          return node.dumpTag(this.dumpTab, indent, this.tab);
+          return node.dumpTag(this, indent, this.tab);
         }
         if (node.nodeType == Node.TEXT_NODE) {
           return this.dumpTextNode(node, indent);
@@ -110,7 +110,7 @@
       dumpElement: function(node, indent) {
         var html = '', indent = indent || '';
         if (!node.querySelector('link[rel=import]')) {
-          html+= this.dumpImports(node, indent);
+          html+= this.dumpImports(node, indent) + '\n';
         }
         html += this.dumpChildren(node, indent);
         //var name = ''; //node.elementAttributes.name || '';
@@ -229,7 +229,7 @@
             }
           }
           css.push('');
-          return css.join('\n');
+          return css.join('\n') + indent;
         }
         return '';
       },
diff --git a/elements/x-inspector/reflection.js b/elements/x-inspector/reflection.js
index 39e0453e..cac768b8 100644
--- a/elements/x-inspector/reflection.js
+++ b/elements/x-inspector/reflection.js
@@ -109,6 +109,16 @@ function reflectObject(obj, meta) {
   return props;
 }
 
+function reflectObjectProperties(obj) {
+  var props = [];
+  if (obj) {
+    Object.keys(obj).forEach(function(name) {
+      props.push(reflectProperty(obj, name, {}));
+    });
+  }
+  return props;
+}
+
 function reflectStyles(element, meta) {
   if (element) {
     //return reflectObject(element.style, meta);
@@ -119,7 +129,8 @@ function reflectStyles(element, meta) {
 window.Reflection = {
   properties: reflectProperties,
   styles: reflectStyles,
-  object: reflectObject
+  object: reflectObject,
+  objectProperties: reflectObjectProperties
 };
 
 })();
diff --git a/elements/x-inspector/x-inspector.html b/elements/x-inspector/x-inspector.html
index 6c270643..3215ac91 100644
--- a/elements/x-inspector/x-inspector.html
+++ b/elements/x-inspector/x-inspector.html
@@ -93,7 +93,12 @@
       update: function() {
         // meta-data attached here
         if (this.sourceElement) {
-          this.properties = Reflection.properties(this.sourceElement);
+          if (this.sourceElement._getInspectorProps) {
+            var p$ = this.sourceElement._getInspectorProps();
+            this.properties = Reflection.objectProperties(p$);
+          } else {
+           this.properties = Reflection.properties(this.sourceElement);
+          }
           this.crumbs = this.listCrumbs();
         } else {
           this.name = '';
diff --git a/elements/x-tree/x-tree.html b/elements/x-tree/x-tree.html
index 9e9f2b3a..83221f3e 100644
--- a/elements/x-tree/x-tree.html
+++ b/elements/x-tree/x-tree.html
@@ -75,11 +75,12 @@
                 }
                 text = ' "' + text + '"';
               }
+              var info = e.treeInfo || {name: e.localName, id: e.id}
               components.push({
                 indent: indent,
-                name: e.localName,
+                name: info.name,
                 element: e,
-                id: e.id ? ' #' + e.id + '': '',
+                id: info.id ? ' #' + info.id + '': '',
                 text: text,
                 selected: (e == selected) ? 'selected' : ''
               });