diff --git a/index.html b/index.html
line changes: +0/-17
index dac9af3..3590878
--- a/index.html
+++ b/index.html

@@ -23,23 +23,6 @@
 </div>
 
 <div id="cell-editor-container">
-  <div class="box hflex">
-    <div class="vflex flex-auto">
-      <h1>Cell Editor</h1>
-      <h2>Title</h2>
-      <input name="title">
-      <h2>Description</h2>
-      <textarea name="description" class="flex-auto"></textarea>
-      <div class="hflex">
-        <button id="cell-editor-close">Close</button>
-      </div>
-    </div>
-    <div class="events">
-      <h2>Events</h2>
-      <div id="event-list"></div>
-      <button id="add-event">Add Event</button>
-    </div>
-  </div>
 </div>
 
 </body>

diff --git a/src/celleditor.ts b/src/celleditor.ts
line changes: +29/-9
index 51a1bc4..ff749bc
--- a/src/celleditor.ts
+++ b/src/celleditor.ts

@@ -5,7 +5,7 @@ import FragmentManager from './fragmentmanager';
 export type CellEditorCallback = (cell: Cell) => void;
 
 export default class CellEditor {
-    container: HTMLDivElement
+    container: FragmentManager
     titleRef: HTMLInputElement
     descriptionRef: HTMLTextAreaElement
     events: FragmentManager[]

@@ -14,19 +14,39 @@ export default class CellEditor {
     onClose: (cell: Cell) => void
 
     constructor() {
-        this.container = <HTMLDivElement>document.getElementById('cell-editor-container');
-        this.container.addEventListener('keydown', function(e: KeyboardEvent) {
+        this.container = new FragmentManager(`
+          <div class="box hflex">
+            <div class="vflex flex-auto">
+              <h1>Cell Editor</h1>
+              <h2>Title</h2>
+              <input name="title">
+              <h2>Description</h2>
+              <textarea name="description" class="flex-auto"></textarea>
+              <div class="hflex">
+                <button id="cell-editor-close">Close</button>
+              </div>
+            </div>
+            <div class="events">
+              <h2>Events</h2>
+              <div id="event-list"></div>
+              <button id="add-event">Add Event</button>
+            </div>
+          </div>
+        `);
+        this.container.mountInto('cell-editor-container');
+
+        this.container.elem.addEventListener('keydown', function(e: KeyboardEvent) {
             e.cancelBubble = true;
         });
 
-        this.titleRef = this.container.querySelector('[name=title]');
-        this.descriptionRef = this.container.querySelector('[name=description]');
+        this.titleRef = <HTMLInputElement>this.container.q('[name=title]');
+        this.descriptionRef = <HTMLTextAreaElement>this.container.q('[name=description]');
 
-        const addEventButton = document.getElementById('add-event');
+        const addEventButton = this.container.q('#add-event');
         addEventButton.addEventListener('click', this.addEventHandler.bind(this));
         this.events = []
 
-        const closeButton = document.getElementById('cell-editor-close');
+        const closeButton = this.container.q('#cell-editor-close');
         closeButton.addEventListener('click', this.closeHandler.bind(this));
     }
 

@@ -38,7 +58,7 @@ export default class CellEditor {
         for (let [k, e] of cell.events) {
             this.addEvent(e);
         }
-        this.container.classList.add('visible');
+        this.container.elem.classList.add('visible');
         this.titleRef.focus();
     }
 

@@ -122,6 +142,6 @@ export default class CellEditor {
             this.onClose(this.cell);
             this.onClose = null;
         }
-        this.container.classList.remove('visible');
+        this.container.elem.classList.remove('visible');
     }
 }

diff --git a/src/fragmentmanager.ts b/src/fragmentmanager.ts
line changes: +21/-7
index 73bb779..97558f9
--- a/src/fragmentmanager.ts
+++ b/src/fragmentmanager.ts

@@ -2,6 +2,17 @@ interface TagProperties {
     [key: string]: string
 }
 
+function getNode(node: string | HTMLElement) {
+    if (typeof node == 'string') {
+        return document.getElementById(node);
+        if (!node) {
+            throw new Error('Could not find destination node ' + node);
+        }
+    }
+
+    return node;
+}
+
 export default class FragmentManager {
     elem: HTMLElement
 

@@ -14,14 +25,17 @@ export default class FragmentManager {
     }
 
     mount(destNode: string | HTMLElement) {
-        if (typeof destNode == 'string') {
-            destNode = document.getElementById(destNode);
-            if (!destNode) {
-                throw new Error('Could not find destination node ' + destNode);
-            }
-        }
+        getNode(destNode).appendChild(this.elem);
+    }
 
-        destNode.appendChild(this.elem);
+    /* mountInto puts the children into the specified node. Because this
+     * adopts an existing node, be careful when unmounting. */
+    mountInto(destNode: string | HTMLElement) {
+        destNode = getNode(destNode);
+        while (this.elem.firstChild) {
+            destNode.appendChild(this.elem.firstChild);
+        }
+        this.elem = destNode;
     }
 
     unmount() {