diff --git a/loop/webui/src/web-components/demo/sketch-timeline.demo.html b/loop/webui/src/web-components/demo/sketch-timeline.demo.html
new file mode 100644
index 0000000..427181d
--- /dev/null
+++ b/loop/webui/src/web-components/demo/sketch-timeline.demo.html
@@ -0,0 +1,47 @@
+<html>
+  <head>
+    <title>sketch-timeline demo</title>
+    <link rel="stylesheet" href="demo.css" />
+    <script src="/dist/web-components/sketch-timeline.js" type="module"></script>
+
+    <script>
+      const messages = [
+        {
+          type: "user",
+          content: "a user message",
+        },
+        {
+          type: "agent",
+          content: "an agent message",
+        },
+        {
+          type: "agent",
+          content: "an agent message",
+        },
+        {
+          type: "agent",
+          content: "an agent message",
+        },
+        {
+          type: "user",
+          content: "a user message",
+        },
+        {
+          type: "user",
+          content: "a user message",
+        },
+      ];
+      document.addEventListener("DOMContentLoaded", () => {
+        const timelineEl = document.querySelector('sketch-timeline');
+        timelineEl.messages = messages;
+      });
+    </script>
+
+  </head>
+  <body>
+    <h1>sketch-timeline demo</h1>
+
+    <sketch-timeline></sketch-timeline>
+
+  </body>
+</html>
\ No newline at end of file