diff --git a/Demo.html b/Demo.html
index ad3fb8a..da73d4e 100644
--- a/Demo.html
+++ b/Demo.html
@@ -1,11 +1,11 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
-    <meta charset="UTF-8">
-    <title>HTML Editor Test</title>
-    <style type="text/css" media="screen">
-    body {
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+  <meta charset="UTF-8">
+  <title>HTML Editor Test</title>
+  <style type="text/css" media="screen">
+  body {
     position: relative;
     margin: 0 auto;
     padding: 50px;
@@ -16,30 +16,19 @@
   h1 {
     font-size: 1.95em;
   }
-    iframe {
-      border: 1px solid #888;
-    }
-    span {
-      cursor: pointer;
-      text-decoration: underline;
-    }
-    p {
-      margin: 5px 0;
-    }
-    </style>
-    <script type="text/javascript" charset="utf-8">
-    var editor;
-    document.addEventListener( 'click', function ( e ) {
-      var id = e.target.id,
-          value;
-      if ( id && editor && editor[ id ] ) {
-        if ( e.target.className === 'prompt' ) {
-          value = prompt( 'Value:' );
-        }
-        editor[ id ]( value );
-      }
-    }, false );
-    </script>
+  span {
+    cursor: pointer;
+    text-decoration: underline;
+  }
+  p {
+    margin: 5px 0;
+  }
+  iframe {
+    border: 1px solid #888;
+    width: 100%;
+    height: 500px;
+  }
+  </style>
 </head>
 <body>
 <h1>HTML Editor Test</h1>
@@ -78,6 +67,87 @@
     <span id="redo">Redo</span>
   </p>
 </header>
-<iframe src="build/document.html" onload="top.editor=this.contentWindow.editor" width="500" height="500"></iframe>
+<script type="text/template" id="editorStyles">
+  html {
+    height: 100%;
+  }
+  body {
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    height: 100%;
+    padding: 1em;
+    background: transparent;
+    color: #2b2b2b;
+    font: 13px/1.35 Helvetica, arial, sans-serif;
+    cursor: text;
+  }
+  a {
+    text-decoration: underline;
+  }
+  h1 {
+    font-size: 138.5%;
+  }
+  h2 {
+    font-size: 123.1%;
+  }
+  h3 {
+    font-size: 108%;
+  }
+  h1,h2,h3,p {
+    margin: 1em 0;
+  }
+  h4,h5,h6 {
+    margin: 0;
+  }
+  ul, ol {
+    margin: 0 1em;
+    padding: 0 1em;
+  }
+  blockquote {
+    border-left: 2px solid blue;
+    margin: 0;
+    padding: 0 10px;
+  }
+</script>
+<script type="text/javascript" src="build/squire-raw.js"></script>
+<script type="text/javascript" charset="utf-8">
+  var editor;
+  var iframe = document.createElement( 'iframe' );
+  iframe.addEventListener( 'load', function () {
+    // Make sure we're in standards mode.
+    var doc = iframe.contentDocument;
+    if ( doc.compatMode !== 'CSS1Compat' ) {
+        doc.open();
+        doc.write( '<!DOCTYPE html><title></title>' );
+        doc.close();
+    }
+    // doc.close() can cause a re-entrant load event in some browsers,
+    // such as IE9.
+    if ( editor ) {
+        return;
+    }
+    // Create Squire instance
+    editor = new Squire( doc );
+    // Add styles to frame
+    var style = doc.createElement( 'style' );
+    style.type = 'text/css';
+    style.textContent = document.getElementById( 'editorStyles' ).textContent;
+    doc.querySelector( 'head' ).appendChild( style );
+  }, false );
+
+  document.body.appendChild( iframe );
+
+  document.addEventListener( 'click', function ( e ) {
+    var id = e.target.id,
+        value;
+    if ( id && editor && editor[ id ] ) {
+      if ( e.target.className === 'prompt' ) {
+        value = prompt( 'Value:' );
+      }
+      editor[ id ]( value );
+    }
+  }, false );
+</script>
 </body>
 </html>
