diff --git a/index.html b/example/index.html
similarity index 72%
rename from index.html
rename to example/index.html
index a85762f..609a4e6 100644
--- a/index.html
+++ b/example/index.html
@@ -4,6 +4,12 @@
     <meta charset="UTF-8">
     <title>Ladder Test Playground</title>
     <style>
+        .counter-widget {
+            margin-bottom: 10px;
+        }
+        .counter {
+            padding: 5px;
+        }
         .rung {
             width: 30px;
             height: 30px;
@@ -20,6 +26,6 @@
 </head>
 <body>
     <div id="app"></div>
-    <script type="module" src="./test.tsx"></script>
+    <script type="module" src="./main.tsx"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/example.tsx b/example/main.tsx
similarity index 69%
rename from example.tsx
rename to example/main.tsx
index bd86e31..842fd4d 100644
--- a/example.tsx
+++ b/example/main.tsx
@@ -1,32 +1,4 @@
-import { h, frag, bootstrap, Rung, Capsule } from "./index";
-
-class AppHypertext extends Rung {
-    private counter = Capsule.new<number>(0);
-    private rungs = Capsule.new<HTMLDivElement | null>(null);
-
-    constructor() {
-        super({});
-        this.counter.watch((count) => this.onCounterUpdate(count));
-    }
-
-    private onCounterUpdate(count: number) {
-        const rungs = Array<Node>(count);
-        for (let i = 0; i < rungs.length; i++) {
-            rungs[i] = <div className={'rung'}/>;
-        }
-        this.rungs.val?.replaceChildren(...rungs);
-    }
-
-    build() {
-        return <>
-            <h1>Ladder</h1>
-            <button onclick={() => this.counter.val--}>-</button>
-            <span>{this.counter}</span>
-            <button onclick={() => this.counter.val++}>+</button>
-            <div saveTo={this.rungs}/>
-        </>;
-    }
-}
+import { h, frag, bootstrap, Rung, Capsule } from "../index";
 
 class AppJSX extends Rung {
     private counter = Capsule.new<number>(0);
@@ -45,12 +17,44 @@ class AppJSX extends Rung {
         this.rungs.val?.replaceChildren(...rungs);
     }
 
+    build() {
+        return <>
+            <h1>Ladder</h1>
+            <div className={"counter-widget"}>
+                <button onclick={() => this.counter.val--}>-</button>
+                <span className={"counter"}>{this.counter}</span>
+                <button onclick={() => this.counter.val++}>+</button>
+            </div>
+            <div saveTo={this.rungs}/>
+        </>;
+    }
+}
+
+class AppHypertext extends Rung {
+    private counter = Capsule.new<number>(0);
+    private rungs = Capsule.new<HTMLDivElement | null>(null);
+
+    constructor() {
+        super({});
+        this.counter.watch((count) => this.onCounterUpdate(count));
+    }
+
+    private onCounterUpdate(count: number) {
+        const rungs = Array<Node>(count);
+        for (let i = 0; i < rungs.length; i++) {
+            rungs[i] = <div className={'rung'}/>;
+        }
+        this.rungs.val?.replaceChildren(...rungs);
+    }
+
     build() {
         return frag(null,
             h("h1", {}, "Ladder"),
-            h("button", {onclick: () => this.counter.val--}, "-"),
-            h("span", {}, this.counter),
-            h("button", {onclick: () => this.counter.val++}, "+"),
+            h("div", {className: "counter-widget"},
+                h("button", {onclick: () => this.counter.val--}, "-"),
+                h("span", {className: "counter"}, this.counter),
+                h("button", {onclick: () => this.counter.val++}, "+"),
+            ),
             h("div", {saveTo: this.rungs}),
         );
     }
