7 files changed, 37 insertions, 10 deletions
diff --git a/test/counter.gleam b/test/examples/counter.gleam
index 126aecc..0bff35b 100644
--- a/test/counter.gleam
+++ b/test/examples/counter.gleam
@@ -13,7 +13,7 @@ pub fn main() {
   // start with if you're just getting started with lustre or you know you don't
   // need the runtime to manage any side effects.
   let app = lustre.simple(init, update, render)
-  let assert Ok(_) = lustre.start(app, "body")
+  let assert Ok(_) = lustre.start(app, "[data-lustre-app]")
 }
 
 // MODEL -----------------------------------------------------------------------
diff --git a/test/counter.html b/test/examples/counter.html
index 2589c00..2b120fd 100644
--- a/test/counter.html
+++ b/test/examples/counter.html
@@ -6,10 +6,12 @@
     <title>lustre | counter</title>
 
     <script type="module">
-      import { main } from "../build/dev/javascript/lustre/counter.mjs";
+      import { main } from "../../build/dev/javascript/lustre/examples/counter.mjs";
 
       document.addEventListener("DOMContentLoaded", main);
     </script>
   </head>
-  <body></body>
+  <body>
+    <div data-lustre-app></div>
+  </body>
 </html>
diff --git a/test/examples/index.html b/test/examples/index.html
new file mode 100644
index 0000000..1dda01b
--- /dev/null
+++ b/test/examples/index.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>lustre | examples</title>
+  </head>
+  <body>
+    <menu>
+      <li>
+        <a href="input.html">input</a>
+      </li>
+      <li>
+        <a href="counter.html">counter</a>
+      </li>
+      <li>
+        <a href="nested.html">nested</a>
+      </li>
+    </menu>
+  </body>
+</html>
diff --git a/test/input.gleam b/test/examples/input.gleam
index b2e85a9..9916000 100644
--- a/test/input.gleam
+++ b/test/examples/input.gleam
@@ -15,7 +15,7 @@ pub fn main() {
   // start with if you're just getting started with lustre or you know you don't
   // need the runtime to manage any side effects.
   let app = lustre.simple(init, update, render)
-  let assert Ok(_) = lustre.start(app, "body")
+  let assert Ok(_) = lustre.start(app, "[data-lustre-app]")
 
   Nil
 }
diff --git a/test/input.html b/test/examples/input.html
index 20b60ca..273dffa 100644
--- a/test/input.html
+++ b/test/examples/input.html
@@ -43,10 +43,12 @@
     </style>
 
     <script type="module">
-      import { main } from "../build/dev/javascript/lustre/input.mjs";
+      import { main } from "../../build/dev/javascript/lustre/examples/input.mjs";
 
       document.addEventListener("DOMContentLoaded", main);
     </script>
   </head>
-  <body class="h-full"></body>
+  <body class="h-full">
+    <div data-lustre-app></div>
+  </body>
 </html>
diff --git a/test/nested.gleam b/test/examples/nested.gleam
index b32a5a3..bd94abe 100644
--- a/test/nested.gleam
+++ b/test/examples/nested.gleam
@@ -1,6 +1,6 @@
 // IMPORTS ---------------------------------------------------------------------
 
-import counter
+import examples/counter
 import gleam/list
 import gleam/map.{Map}
 import gleam/pair
@@ -15,7 +15,7 @@ pub fn main() {
   // start with if you're just getting started with lustre or you know you don't
   // need the runtime to manage any side effects.
   let app = lustre.simple(init, update, render)
-  let assert Ok(_) = lustre.start(app, "body")
+  let assert Ok(_) = lustre.start(app, "[data-lustre-app]")
 
   Nil
 }
diff --git a/test/nested.html b/test/examples/nested.html
index 8602345..420b159 100644
--- a/test/nested.html
+++ b/test/examples/nested.html
@@ -6,10 +6,12 @@
     <title>lustre | nested</title>
 
     <script type="module">
-      import { main } from "../build/dev/javascript/lustre/nested.mjs";
+      import { main } from "../../build/dev/javascript/lustre/examples/nested.mjs";
 
       document.addEventListener("DOMContentLoaded", main);
     </script>
   </head>
-  <body></body>
+  <body>
+    <div data-lustre-app></div>
+  </body>
 </html>