diff --git a/samples/HTML/index.html.hl b/samples/HTML/index.html.hl
new file mode 100644
index 00000000..65491957
--- /dev/null
+++ b/samples/HTML/index.html.hl
@@ -0,0 +1,328 @@
+<script type="text/hoplon">
+(page "index.html")
+
+(defn mouse-loc->vec
+  "Given a Google Closure normalized DOM mouse event return the
+  mouse x and y position as a two element vector."
+  [e]
+  [(.-clientX e) (.-clientY e)])
+
+;; =============================================================================
+;; Example 1
+
+(defc ex1-content         ["Waiting for a click ...."])
+(defc ex1-click-count     0)
+(defn ex1 []
+  (when (< @ex1-click-count 1)
+    (swap! ex1-click-count inc)
+    (swap! ex1-content conj "Got a click!")))
+
+;; =============================================================================
+;; Example 2
+
+(defc ex2-content         ["Waiting for a click ...."])
+(defc ex2-click-count     0)
+(defn ex2 []
+  (when (= @ex2-click-count 1)
+    (swap! ex2-click-count inc)
+    (swap! ex2-content conj "Done"))
+  (when (= @ex2-click-count 0)
+    (swap! ex2-click-count inc)
+    (swap! ex2-content conj "Got a Click!" "Waiting for another click ....")))  
+
+;; =============================================================================
+;; Example 3
+
+(defc ex3-content           ["Waiting for a click from Button A ....."])
+(defc ex3-click-count-a     0)
+(defc ex3-click-count-b     0)
+(defn ex3a []
+  (when (= @ex3-click-count-a 0)
+    (swap! ex3-click-count-a inc)
+    (swap! ex3-content conj "Got a click!" "Waiting for a click from Button B ....")) )
+(defn ex3b []
+  (when (and (= @ex3-click-count-a 1) (= @ex3-click-count-b 0))
+    (swap! ex3-click-count-b inc)
+    (swap! ex3-content conj "Done!")))
+
+;; =============================================================================
+;; Example 6
+
+(defc ex6-content           ["Click the button to start tracking the mouse."])
+(defc ex6-button-name       "GO!")
+(defn ex6-toggle []
+  (let [new-name    (if (= @ex6-button-name "GO!") "STOP!" "GO!")]
+    (reset! ex6-button-name new-name)))
+(defn ex6 [e]
+  (when (= @ex6-button-name "STOP!")
+    (swap! ex6-content conj (str (mouse-loc->vec e)))))
+
+;; =============================================================================
+;; Example 7
+
+(defc ex7-content         ["Click the button to start tracking the mouse."])
+(defc ex7-button-name     "GO!")
+(defn ex7-toggle []
+  (let [new-name    (if (= @ex7-button-name "GO!") "STOP!" "GO!")]
+    (reset! ex7-button-name new-name)))
+(defn ex7 [e]
+  (when (= @ex7-button-name "STOP!")
+    (let [[x y :as  m]   (mouse-loc->vec e)]
+      (when (zero? (mod y 5))
+        (swap! ex7-content conj (str m))))))
+
+;; =============================================================================
+;; Example 8
+
+(defc ex8-content       ["Click the button ten times."])
+(defc ex8-click-count   0)
+(defn ex8 []
+  (when (< @ex8-click-count 10)
+    (swap! ex8-click-count inc)
+    (when (= @ex8-click-count 1)
+      (swap! ex8-content conj "1 Click!"))
+    (when (> @ex8-click-count 1)
+      (swap! ex8-content conj (str @ex8-click-count " clicks!")))
+    (when (= @ex8-click-count 10)
+      (swap! ex8-content conj "Done."))))
+
+;; =============================================================================
+;; Example 9
+
+(defc ex9-index       0)
+(defc ex9-animals     [:aardvark :beetle :cat :dog :elk :ferret
+                     :goose :hippo :ibis :jellyfish :kangaroo])
+(defc= ex9-card           (nth ex9-animals ex9-index))
+(defn ex9-prev []
+  (when (> @ex9-index 0)
+    (swap! ex9-index dec)))
+(defn ex9-next []
+  (when (< @ex9-index (dec (count @ex9-animals)))
+    (swap! ex9-index inc)))
+
+;; =============================================================================
+;; Example 10
+
+(defc ex10-button-name  "START!")
+(defc ex10-index       0)
+(defn ex10 []
+  (let [the-name    @ex10-button-name]
+  (when (= the-name"START!")
+    (reset! ex10-button-name "STOP!"))
+  (when (= the-name"STOP!")
+    (reset! ex10-button-name "DONE!"))))
+(defc ex10-animals     [:aardvark :beetle :cat :dog :elk :ferret
+                     :goose :hippo :ibis :jellyfish :kangaroo])
+(defc= ex10-max        (dec (count ex10-animals)))
+(defc= ex10-card           (nth ex10-animals ex10-index))
+(defn ex10-prev []
+  (if (> @ex10-index 0)
+    (swap! ex10-index dec)
+    (reset! ex10-index @ex10-max)))
+(defn ex10-next []
+  (if (< @ex10-index @ex10-max)
+    (swap! ex10-index inc)
+    (reset! ex10-index 0)))
+(defn ex10-nav [k]
+  (when (= @ex10-button-name "STOP!")
+    (when (= k :next)
+      (ex10-next))
+    (when (= k :prev)
+      (ex10-prev))))
+
+(defn ex10-keys [e]
+  (when (= @ex10-button-name "STOP!")
+    (if (= (.-keyCode e) 39) (ex10-nav :next))
+    (if (= (.-keyCode e) 37) (ex10-nav :prev))
+    )
+  )
+</script>
+
+<html>
+    <head>
+        <link rel="stylesheet" type="text/css" href="css/main.css" />
+    </head>
+    <body>
+        <!-- Example 1 -->
+        <div id="ex1" class="example">
+            <h2>Example 1</h2>
+            <table>
+                <tr>
+                    <td class="left">
+                        <button id="ex1-button" on-click='{{ #(ex1) }}'>Click me</button>
+                    </td>
+                    <td id="ex1-display" class="display">
+                        <div id="ex1-messages">
+                        <loop-tpl bindings='{{ [x ex1-content] }}'>
+                          <p><text>~{x}</text></p>
+                        </loop-tpl>
+                        </div>
+                    </td>
+                </tr>
+            </table>
+        </div>
+
+        <!-- Example 2 -->
+        <div id="ex2" class="example">
+            <h2>Example 2</h2>
+            <table>
+                <tr>
+                    <td class="left">
+                        <button id="ex2-button" on-click='{{ #(ex2) }}'>Click me</button>
+                    </td>
+                    <td id="ex2-display" class="display">
+                        <div id="ex2-messages">
+                        <loop-tpl bindings='{{ [x ex2-content] }}'>
+                          <p><text>~{x}</text></p>
+                        </loop-tpl>
+                        </div>
+                    </td>
+                </tr>
+            </table>
+        </div>
+        
+        <!-- Example 3 -->
+        <div id="ex3" class="example">
+            <h2>Example 3</h2>
+            <table>
+                <tr>
+                    <td class="left">
+                        <button id="ex3-button-a" on-click='{{ #(ex3a) }}'>Button A</button>
+                        <button id="ex3-button-b" on-click='{{ #(ex3b) }}'>Button B</button>
+                    </td>
+                    <td id="ex3-display" class="display">
+                        <div id="ex3-messages">
+                        <loop-tpl bindings='{{ [x ex3-content] }}'>
+                          <p><text>~{x}</text></p>
+                        </loop-tpl>
+                        </div>
+                    </td>
+                </tr>
+            </table>
+        </div>
+
+        <!-- Example 4 -->
+        <div id="ex4" class="example">
+            <h2>Example 4</h2>
+            <table>
+                <tr>
+                    <td class="left">
+                        <button id="ex4-button-a">Go!</button>
+                    </td>
+                    <td id="ex4-display" class="display">
+                        <div id="ex4-messages"></div>
+                    </td>
+                </tr>
+            </table>
+        </div>
+
+        <!-- Example 5 -->
+        <div id="ex5" class="example">
+            <h2>Example 5</h2>
+            <table>
+                <tr>
+                    <td class="left">
+                        <button id="ex5-button">Go!</button>
+                    </td>
+                    <td id="ex5-display" class="display">
+                        <div id="ex5-messages"></div>
+                    </td>
+                </tr>
+            </table>
+        </div>
+
+        <!-- Example 6 -->
+        <div id="ex6" class="example" on-mousemove='{{ #(ex6 %) }}' >
+            <h2>Example 6</h2>
+            <table>
+                <tr>
+                    <td class="left">
+                        <button id="ex6-button" do-text='{{ ex6-button-name }}' on-click='{{ #(ex6-toggle)}}' ></button>
+                    </td>
+                    <td id="ex6-display" class="display">
+                        <div class="scrolling">
+                            <div id="ex6-messages">
+                            <loop-tpl bindings='{{ [x ex6-content] }}'>
+                              <p><text>~{x}</text></p>
+                            </loop-tpl>
+                            </div>
+                        </div>
+                    </td>
+                </tr>
+            </table>
+        </div>
+
+        <!-- Example 7 -->
+        <div id="ex7" class="example" on-mousemove='{{ #(ex7 %) }}'>
+            <h2>Example 7</h2>
+            <table>
+                <tr>
+                    <td class="left">
+                        <button id="ex7-button" do-text='{{ ex7-button-name }}' on-click='{{ #(ex7-toggle)}}'></button>
+                    </td>
+                    <td id="ex7-display" class="display">
+                        <div class="scrolling">
+                            <div id="ex7-messages">
+                            <loop-tpl bindings='{{ [x ex7-content] }}'>
+                              <p><text>~{x}</text></p>
+                            </loop-tpl>
+                            </div>
+                        </div>
+                    </td>
+                </tr>
+            </table>
+        </div>
+
+        <!-- Example 8 -->
+        <div id="ex8" class="example">
+            <h2>Example 8</h2>
+            <table>
+                <tr>
+                    <td class="left">
+                        <button id="ex8-button" on-click='{{ #(ex8) }}'>Click me!</button>
+                    </td>
+                    <td id="ex8-display" class="display card">
+                        <div class="scrolling">
+                            <div id="ex8-messages">
+                            <loop-tpl bindings='{{ [x ex8-content] }}'>
+                              <p><text>~{x}</text></p>
+                            </loop-tpl>
+                            </div>
+                        </div>
+                    </td>
+                </tr>
+            </table>
+        </div>
+
+        <!-- Example 9 -->
+        <div id="ex9" class="example">
+            <h2>Example 9</h2>
+            <table>
+                <tr>
+                    <td class="left">
+                        <button id="ex9-button-prev" on-click='{{ #(ex9-prev) }}' do-class='{{ (cell= {:disabled (= ex9-index 0)})}}'>Previous</button>
+                        <button id="ex9-button-next" on-click='{{ #(ex9-next) }}' do-class='{{ (cell= {:disabled (= ex9-index (dec (count ex9-animals)))}) }}'>Next</button>
+                    </td>
+                    <td id="ex9-card" class="display card" do-text='{{ ex9-card }}'></td>
+                </tr>
+            </table>
+        </div>
+
+        <!-- Example 10 -->
+        <div id="ex10" class="example" on-keydown='{{ #(ex10-keys %) }}'>
+            <h2>Example 10</h2>
+            <table>
+                <tr>
+                    <td class="left">
+                        <button id="ex10-button-start-stop" do-text='{{ ex10-button-name}}' on-click='{{ #(ex10) }}'></button>
+                        <button id="ex10-button-prev" on-click='{{ #(ex10-nav :prev) }}' 
+                          do-class='{{ (cell= {:disabled (not= ex10-button-name "STOP!")}) }}'>Previous
+                        </button>
+                        <button id="ex10-button-next" on-click='{{ #(ex10-nav :next) }}' do-class='{{ (cell= {:disabled (not= ex10-button-name "STOP!")}) }}'>Next</button>
+                    </td>
+                    <td id="ex10-card" class="display card" do-text='{{ ex10-card }}'></td>
+                </tr>
+            </table>
+        </div>
+    </body>
+</html>