diff --git a/loop/webui/src/web-components/demo/readme.md b/loop/webui/src/web-components/demo/readme.md
index 8e3c33c..324d077 100644
--- a/loop/webui/src/web-components/demo/readme.md
+++ b/loop/webui/src/web-components/demo/readme.md
@@ -2,13 +2,4 @@
 
 These are handy for iterating on specific component UI issues in isolation from the rest of the sketch application, and without having to start a full backend to serve the full frontend app UI.
 
-# How to use this demo directory to iterate on component development
-
-From the `loop/webui` directory:
-
-1. In one shell, run `npm run watch` to build the web components and watch for changes
-1. In another shell, run `npm run demo` to start a local web server to serve the demo pages
-1. open http://localhost:8000/src/web-components/demo/ in your browser
-1. make edits to the .ts code or to the demo.html files and see how it affects the demo pages in real time
-
-Alternately, use the `webui: watch demo` task in VSCode, which runs all of the above for you.
+See [README](../../../readme.md#development-mode) for more information on how to run the demo pages.
diff --git a/loop/webui/src/web-components/demo/sketch-app-shell.demo.html b/loop/webui/src/web-components/demo/sketch-app-shell.demo.html
index ef335ed..48fc100 100644
--- a/loop/webui/src/web-components/demo/sketch-app-shell.demo.html
+++ b/loop/webui/src/web-components/demo/sketch-app-shell.demo.html
@@ -1,15 +1,13 @@
-<html>
+<!doctype html>
+<html lang="en">
   <head>
-    <title>sketch-app-shell demo</title>
-    <link rel="stylesheet" href="demo.css" />
-    <script
-      src="/dist/web-components/sketch-app-shell.js"
-      type="module"
-    ></script>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>sketch coding assistant</title>
+    <link rel="stylesheet" href="sketch-app-shell.css" />
+    <script src="../sketch-app-shell.ts" type="module"></script>
   </head>
   <body>
-    <h1>sketch-app-shell demo</h1>
-
     <sketch-app-shell></sketch-app-shell>
   </body>
 </html>
diff --git a/loop/webui/src/web-components/demo/sketch-charts.demo.html b/loop/webui/src/web-components/demo/sketch-charts.demo.html
index d9b714d..64a9bd2 100644
--- a/loop/webui/src/web-components/demo/sketch-charts.demo.html
+++ b/loop/webui/src/web-components/demo/sketch-charts.demo.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <title>Sketch Charts Demo</title>
-    <script type="module" src="/dist/web-components/sketch-charts.js"></script>
+    <script type="module" src="../sketch-charts.ts"></script>
     <link rel="stylesheet" href="demo.css" />
     <style>
       sketch-charts {
diff --git a/loop/webui/src/web-components/demo/sketch-chat-input.demo.html b/loop/webui/src/web-components/demo/sketch-chat-input.demo.html
index 99d581b..e76aed7 100644
--- a/loop/webui/src/web-components/demo/sketch-chat-input.demo.html
+++ b/loop/webui/src/web-components/demo/sketch-chat-input.demo.html
@@ -2,9 +2,7 @@
   <head>
     <title>sketch-chat-input demo</title>
     <link rel="stylesheet" href="demo.css" />
-    <script
-      src="/dist/web-components/sketch-chat-input.js"
-      type="module"
+    <script type="module" src="../sketch-chat-input.ts"
     ></script>
 
     <script>
diff --git a/loop/webui/src/web-components/demo/sketch-container-status.demo.html b/loop/webui/src/web-components/demo/sketch-container-status.demo.html
index a35e881..e18440d 100644
--- a/loop/webui/src/web-components/demo/sketch-container-status.demo.html
+++ b/loop/webui/src/web-components/demo/sketch-container-status.demo.html
@@ -2,9 +2,7 @@
   <head>
     <title>sketch-container-status demo</title>
     <link rel="stylesheet" href="demo.css" />
-    <script
-      src="/dist/web-components/sketch-container-status.js"
-      type="module"
+    <script type="module" src="../sketch-container-status.ts"
     ></script>
 
     <script>
diff --git a/loop/webui/src/web-components/demo/sketch-diff-view.demo.html b/loop/webui/src/web-components/demo/sketch-diff-view.demo.html
index 3a6cb35..1dc9337 100644
--- a/loop/webui/src/web-components/demo/sketch-diff-view.demo.html
+++ b/loop/webui/src/web-components/demo/sketch-diff-view.demo.html
@@ -9,8 +9,7 @@
       href="../../../node_modules/diff2html/bundles/css/diff2html.min.css"
     />
     <script
-      type="module"
-      src="/dist/web-components/sketch-diff-view.js"
+      type="module" src="../sketch-diff-view.ts"
     ></script>
     <style>
       body {
diff --git a/loop/webui/src/web-components/demo/sketch-network-status.demo.html b/loop/webui/src/web-components/demo/sketch-network-status.demo.html
index d645840..04c118c 100644
--- a/loop/webui/src/web-components/demo/sketch-network-status.demo.html
+++ b/loop/webui/src/web-components/demo/sketch-network-status.demo.html
@@ -2,9 +2,7 @@
   <head>
     <title>sketch-network-status demo</title>
     <link rel="stylesheet" href="demo.css" />
-    <script
-      src="/dist/web-components/sketch-network-status.js"
-      type="module"
+    <script type="module" src="../sketch-network-status.ts"
     ></script>
   </head>
   <body>
diff --git a/loop/webui/src/web-components/demo/sketch-timeline-message.demo.html b/loop/webui/src/web-components/demo/sketch-timeline-message.demo.html
index cb2bdf3..a97145e 100644
--- a/loop/webui/src/web-components/demo/sketch-timeline-message.demo.html
+++ b/loop/webui/src/web-components/demo/sketch-timeline-message.demo.html
@@ -2,9 +2,7 @@
   <head>
     <title>sketch-timeline-message demo</title>
     <link rel="stylesheet" href="demo.css" />
-    <script
-      src="/dist/web-components/sketch-timeline-message.js"
-      type="module"
+    <script type="module" src="../sketch-timeline-message.ts"
     ></script>
 
     <script>
diff --git a/loop/webui/src/web-components/demo/sketch-timeline.demo.html b/loop/webui/src/web-components/demo/sketch-timeline.demo.html
index be8ab8e..58abdb2 100644
--- a/loop/webui/src/web-components/demo/sketch-timeline.demo.html
+++ b/loop/webui/src/web-components/demo/sketch-timeline.demo.html
@@ -2,9 +2,7 @@
   <head>
     <title>sketch-timeline demo</title>
     <link rel="stylesheet" href="demo.css" />
-    <script
-      src="/dist/web-components/sketch-timeline.js"
-      type="module"
+    <script type="module" src="../sketch-timeline.ts"
     ></script>
     <script>
       const messages = [
diff --git a/loop/webui/src/web-components/demo/sketch-tool-calls.demo.html b/loop/webui/src/web-components/demo/sketch-tool-calls.demo.html
index 44b598a..7bedf11 100644
--- a/loop/webui/src/web-components/demo/sketch-tool-calls.demo.html
+++ b/loop/webui/src/web-components/demo/sketch-tool-calls.demo.html
@@ -3,9 +3,7 @@
     <title>sketch-tool-calls demo</title>
     <link rel="stylesheet" href="demo.css" />
 
-    <script
-      src="/dist/web-components/sketch-tool-calls.js"
-      type="module"
+    <script type="module" src="../sketch-tool-calls.ts"
     ></script>
 
     <script>
diff --git a/loop/webui/src/web-components/demo/sketch-tool-card.demo.html b/loop/webui/src/web-components/demo/sketch-tool-card.demo.html
index 17c64ae..3926f2e 100644
--- a/loop/webui/src/web-components/demo/sketch-tool-card.demo.html
+++ b/loop/webui/src/web-components/demo/sketch-tool-card.demo.html
@@ -3,9 +3,7 @@
     <title>sketch-tool-card demo</title>
     <link rel="stylesheet" href="demo.css" />
 
-    <script
-      src="/dist/web-components/sketch-tool-card.js"
-      type="module"
+    <script type="module" src="../sketch-tool-card.ts"
     ></script>
 
     <script>
diff --git a/loop/webui/src/web-components/demo/sketch-view-mode-select.demo.html b/loop/webui/src/web-components/demo/sketch-view-mode-select.demo.html
index 7f795fc..af2f1fb 100644
--- a/loop/webui/src/web-components/demo/sketch-view-mode-select.demo.html
+++ b/loop/webui/src/web-components/demo/sketch-view-mode-select.demo.html
@@ -3,9 +3,7 @@
     <title>sketch-view-mode-select demo</title>
     <link rel="stylesheet" href="demo.css" />
 
-    <script
-      src="/dist/web-components/sketch-view-mode-select.js"
-      type="module"
+    <script type="module" src="../sketch-view-mode-select.ts"
     ></script>
 
     <script>