diff --git a/demo/app/components/mobiledoc-dom-renderer.js b/demo/app/components/mobiledoc-dom-renderer.js
index c573ef260..d792a6819 100644
--- a/demo/app/components/mobiledoc-dom-renderer.js
+++ b/demo/app/components/mobiledoc-dom-renderer.js
@@ -1,22 +1,28 @@
 import Ember from 'ember';
-import { cardsHash } from '../mobiledoc-cards/index';
+import { cards } from '../mobiledoc-cards/index';
 import Renderer from 'ember-mobiledoc-dom-renderer';
 
 let { computed, run } = Ember;
 
+let renderer = new Renderer({cards});
+
 export default Ember.Component.extend({
-  domRenderer: computed(function(){
-    return new Renderer();
-  }),
   didRender() {
-    let domRenderer = this.get('domRenderer');
     let mobiledoc = this.get('mobiledoc');
+    if (!mobiledoc) {
+      return;
+    }
+
     run(() => {
-      let target = this.$();
-      target.empty();
-      if (mobiledoc) {
-        domRenderer.render(mobiledoc, target[0], cardsHash);
+      if (this._teardownRender) {
+        this._teardownRender();
+        this._teardownRender = null;
       }
+
+      let target = this.$();
+      let { result, teardown } = renderer.render(mobiledoc);
+      target.append(result);
+      this._teardownRender = teardown;
     });
   }
 });
diff --git a/demo/app/mobiledoc-cards/codemirror.js b/demo/app/mobiledoc-cards/codemirror.js
index 787713646..ae63ee919 100644
--- a/demo/app/mobiledoc-cards/codemirror.js
+++ b/demo/app/mobiledoc-cards/codemirror.js
@@ -5,43 +5,41 @@ let getCode = ({code}) => {
 
 export default {
   name: 'codemirror-card',
-  display: {
-    setup(element, options, env, payload) {
-      $(element).empty();
-      let code = getCode(payload);
-      let button = $('<button>Edit</button>');
+  type: 'dom',
+  render({env, options, payload}) {
+    let element = $('<div></div>');
+    let code = getCode(payload);
+    let button = $('<button>Edit</button>');
 
-      if (env.edit) {
-        button.on('click', env.edit);
-        $(element).append(button);
-      }
-
-      let ta = $(`<textarea>${code}</textarea>`);
-      $(element).append(ta);
-      CodeMirror.fromTextArea(ta[0], {
-        mode: 'javascript',
-        readOnly: 'nocursor'
-      });
+    if (env.edit) {
+      button.on('click', env.edit);
+      $(element).append(button);
     }
-  },
-  edit: {
-    setup(element, options, env, payload) {
-      $(element).empty();
 
-      let code = getCode(payload);
-      let ta = $(`<textarea>${code}</textarea>`);
+    let ta = $(`<textarea>${code}</textarea>`);
+    $(element).append(ta);
+    CodeMirror.fromTextArea(ta[0], {
+      mode: 'javascript',
+      readOnly: 'nocursor'
+    });
+    return element[0];
+  },
+  edit({env, options, payload}) {
+    let element = $('<div></div>');
+    let code = getCode(payload);
+    let ta = $(`<textarea>${code}</textarea>`);
 
-      let button = $('<button>Save</button>');
-      $(element).append(button);
+    let button = $('<button>Save</button>');
+    $(element).append(button);
 
-      $(element).append(ta);
-      let cm = CodeMirror.fromTextArea(ta[0], {
-        mode: 'javascript'
-      });
-      button.on('click', () => {
-        let code = cm.getValue();
-        env.save({code});
-      });
-    }
+    $(element).append(ta);
+    let cm = CodeMirror.fromTextArea(ta[0], {
+      mode: 'javascript'
+    });
+    button.on('click', () => {
+      let code = cm.getValue();
+      env.save({code});
+    });
+    return element[0];
   }
 };
diff --git a/demo/app/mobiledoc-cards/image.js b/demo/app/mobiledoc-cards/image.js
index 1b15df734..d57314939 100644
--- a/demo/app/mobiledoc-cards/image.js
+++ b/demo/app/mobiledoc-cards/image.js
@@ -8,6 +8,10 @@ function displayImage(element, src=defaultSrc) {
 
 export default {
   name: 'image-card',
+  type: 'dom',
+  render() {},
+  edit() {}
+  /*
   display: {
     setup(element, options, env, payload) {
       displayImage(element, payload.src);
@@ -52,8 +56,9 @@ export default {
     }
   },
   text: {
-    setup(/*str, options, env, payload*/) {
+    setup(str, options, env, payload) {
       return "[image]";
     }
   }
+  */
 };
diff --git a/demo/app/mobiledoc-cards/index.js b/demo/app/mobiledoc-cards/index.js
index 28a9d5888..15ea3c9c7 100644
--- a/demo/app/mobiledoc-cards/index.js
+++ b/demo/app/mobiledoc-cards/index.js
@@ -4,16 +4,10 @@ import selfieCard from './selfie';
 import imageCard from './image';
 import codemirrorCard from './codemirror';
 
-export let cardsList = [
+export const cards = [
   inputCard,
   simpleCard,
   selfieCard,
   imageCard,
   codemirrorCard
 ];
-
-let cardsHash = {};
-cardsList.forEach(card => {
-  cardsHash[card.name] = card;
-});
-export { cardsHash };
diff --git a/demo/app/mobiledoc-cards/input.js b/demo/app/mobiledoc-cards/input.js
index b0a5b3bf2..c5fb289d2 100644
--- a/demo/app/mobiledoc-cards/input.js
+++ b/demo/app/mobiledoc-cards/input.js
@@ -4,40 +4,34 @@ let { $ } = Ember;
 
 export default {
   name: 'input-card',
-  display: {
-    setup(element, options, env, payload) {
-      $(element).empty();
-
-      var text = 'I am in display mode';
-      if (payload.name) {
-        text = 'Hello, ' + payload.name + '!';
-      }
-      var card = $(`<div>${text}</div>`);
-      var button = $('<button>Edit</button>');
-      button.on('click', env.edit);
+  type: 'dom',
+  render({env, payload}) {
+    var text = 'I am in display mode';
+    if (payload.name) {
+      text = 'Hello, ' + payload.name + '!';
+    }
+    var card = $(`<div>${text}</div>`);
+    var button = $('<button>Edit</button>');
+    button.on('click', env.edit);
 
-      if (env.edit) {
-        card.append(button);
-      }
-      $(element).append(card);
+    if (env.edit) {
+      card.append(button);
     }
+    return card[0];
   },
-  edit: {
-    setup(element, options, env) {
-      $(element).empty();
-      var card = $('<div>What is your name?</div>');
-      card.innerHTML = 'What is your name?';
+  edit({env}) {
+    var card = $('<div>What is your name?</div>');
+    card.innerHTML = 'What is your name?';
 
-      var input = $('<input placeholder="Enter your name...">');
-      var button = $('<button>Save</button>');
-      button.on('click', () => {
-        var name = input.val();
-        env.save({name});
-      });
+    var input = $('<input placeholder="Enter your name...">');
+    var button = $('<button>Save</button>');
+    button.on('click', () => {
+      var name = input.val();
+      env.save({name});
+    });
 
-      card.append(input);
-      card.append(button);
-      $(element).append(card);
-    }
+    card.append(input);
+    card.append(button);
+    return card[0];
   }
 };
diff --git a/demo/app/mobiledoc-cards/selfie.js b/demo/app/mobiledoc-cards/selfie.js
index dc6f5b6d7..539b6c4ca 100644
--- a/demo/app/mobiledoc-cards/selfie.js
+++ b/demo/app/mobiledoc-cards/selfie.js
@@ -4,6 +4,10 @@ let { $ } = Ember;
 
 export default {
   name: 'selfie-card',
+  type: 'dom',
+  render() {},
+  edit() {}
+  /*
   display: {
     setup(element, options, env, payload) {
       $(element).empty();
@@ -89,4 +93,5 @@ export default {
       return "[ :-) ]";
     }
   }
+ */
 };
diff --git a/demo/app/mobiledoc-cards/simple.js b/demo/app/mobiledoc-cards/simple.js
index b15179445..c301e7926 100644
--- a/demo/app/mobiledoc-cards/simple.js
+++ b/demo/app/mobiledoc-cards/simple.js
@@ -4,14 +4,14 @@ let { $ } = Ember;
 
 export default {
   name: 'simple-card',
-  display: {
-    setup(element, options, env) {
-      var card = document.createElement('span');
-      card.innerHTML = 'Hello, world';
-      element.appendChild(card);
-      var button = $('<button>Remove card</button>');
-      button.on('click', env.remove);
-      $(element).append(button);
-    }
+  type: 'dom',
+  render({env}) {
+    var element = document.createElement('div');
+    var card = document.createElement('span');
+    card.innerHTML = 'Hello, world';
+    element.appendChild(card);
+    var button = $('<button>Remove card</button>');
+    button.on('click', env.remove);
+    return element;
   }
 };