diff --git a/demo/devel.sh b/demo/devel.sh
new file mode 100755
index 0000000..76d52d5
--- /dev/null
+++ b/demo/devel.sh
@@ -0,0 +1,12 @@
+#!/bin/bash
+
+last=""
+while [ true ]; do
+    now=$(find ./less -type f -printf "%T@ %Tx %TX %p\n" | sort -n -r | head -1)
+    if [ "$last" != "$now" ]; then
+        make >/dev/null
+        echo "Updated."
+    fi
+    last=$now
+    sleep 1
+done
diff --git a/demo/less/layout.less b/demo/less/layout.less
index b867d86..f53bace 100644
--- a/demo/less/layout.less
+++ b/demo/less/layout.less
@@ -191,6 +191,50 @@ table.zebra {
     font-size:                  0.7em;
 }
 
+.shadow {
+    box-shadow:                 5px 5px rgba(15,15,15,0.05);
+}
+
+.popover {
+    position:                   fixed;
+    height:                     100%;
+    width:                      100%;
+    .focus {
+        .shadow;
+        border:                 1px solid #CCCCCC;
+        background-color:       #FFFFFF;
+        border-radius:          5px;
+        width:                  90%;
+        height:                 90%;
+        margin-left:            auto;
+        margin-right:           auto;
+        margin-top:             2%;
+    }
+}
+
+.repl {
+    height:                     100%;
+    padding:                    3px;
+    .repl-left {
+        float:                  left;
+    }
+    .repl-right {
+        float:                  right;
+    }
+    .repl-pane {
+        padding:                0px;
+        margin:                 0px;
+        border:                 0px solid #000000;
+        resize:                 none;
+        width:                  48%;
+        height:                 99%;
+    }
+}
+
+small {
+    font-size:                   0.5em;
+}
+
 .clear {
     clear:                      both;
 }
diff --git a/demo/templates/base.html b/demo/templates/base.html
index e6bc44e..7b61cd9 100644
--- a/demo/templates/base.html
+++ b/demo/templates/base.html
@@ -3,17 +3,72 @@
     <head>
         <title>{% block title %}{% endblock %} | hy</title>
         <link rel="stylesheet" href = "{{ url_for('static', filename='css/debuild.css') }}" ></link>
+        <script src = '{{ url_for('static', filename='jquery.min.js') }}' ></script>
+    <script type="text/javascript">
+function reload() {
+    var input = $("#repl-input").val();
+    console.log("Input: " + input);
+    $('#repl-output').load(
+        '/translate',
+        {"code": input}
+    );
+}
+
+$(document).ready(function() {
+    $("#repl-input").keyup(function(e) {
+        reload();
+    });
+    reload();
+});
+    </script>
     </head>
     <body>
+        <div class = 'popover' >
+            <div class = 'focus' >
+                <div class = 'repl' >
+                    <textarea id = 'repl-input' class = 'repl-left repl-pane' >
+(import "os")
+
+(print (os.path.abspath "."))
+; something like /home/tag
+
+
+(defn square [x]
+  (* x x))
+
+
+(defn factorial (n)
+  (if (&lt;= n 1)
+    1
+    (* n (factorial (- n 1)))))
+
+
+(defn fib (n)
+  (if (&lt; n 2)
+    n
+    (+ (fib (- n 1)) (fib (- n 2)))))
+
+
+(print (fib 2))
+; 1
+
+
+(print "4! =" (factorial 4))
+; 4! = 24
+</textarea>
+                    <pre id = 'repl-output' class = 'repl-right repl-pane' ></pre>
+                </div>
+            </div>
+        </div>
         <div class = 'headblock' >
             <div class = 'spacer' ></div>
         </div>
         <div class = 'headblock' >
             <div class = 'banner' >
                 <ul>
-                    <li><a href = '/' >Home</a></li>
-                    <li><a href = '/packages' >Try it</a></li>
-                    <li><a href = '/about' >Source</a></li>
+                    <li><a href = '#' >Home</a></li>
+                    <li><a href = '#' >Try it</a></li>
+                    <li><a href = '#' >Source</a></li>
                 </ul>
             </div>
         </div>
