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
new file mode 100644
index 0000000..63b5395
--- /dev/null
+++ b/loop/webui/src/web-components/demo/sketch-diff-view.demo.html
@@ -0,0 +1,104 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Sketch Diff Viewer Demo</title>
+  <link rel="stylesheet" href="../../../node_modules/diff2html/bundles/css/diff2html.min.css">
+  <script type="module" src="/dist/web-components/sketch-diff-view.js"></script>
+  <style>
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+      max-width: 1200px;
+      margin: 0 auto;
+      padding: 2rem;
+    }
+    
+    h1 {
+      color: #333;
+      margin-bottom: 2rem;
+    }
+    
+    .control-panel {
+      margin-bottom: 2rem;
+      padding: 1rem;
+      background-color: #f0f0f0;
+      border-radius: 4px;
+    }
+    
+    input {
+      padding: 0.5rem;
+      border-radius: 4px;
+      border: 1px solid #ccc;
+      width: 300px;
+    }
+    
+    button {
+      padding: 0.5rem 1rem;
+      background-color: #2196f3;
+      color: white;
+      border: none;
+      border-radius: 4px;
+      cursor: pointer;
+      margin-left: 1rem;
+    }
+    
+    button:hover {
+      background-color: #0d8bf2;
+    }
+  </style>
+
+<script>
+  document.addEventListener('DOMContentLoaded', () => {
+    const diffViewer = document.getElementById('diffViewer');
+    const commitHashInput = document.getElementById('commitHash');
+    const viewDiffButton = document.getElementById('viewDiff');
+    let commit = false;
+    viewDiffButton.addEventListener('click', () => {
+      let diffContent = `diff --git a/sample.txt b/sample.txt
+index 1111111..2222222 100644
+--- a/sample.txt
++++ b/sample.txt
+@@ -1,5 +1,5 @@
+ This is a sample file
+-This line will be removed
++This line is added as a replacement
+ This line stays the same
+-Another line to remove
++A completely new line
+ The last line is unchanged`;
+       if (commit) {
+            // For demo purposes, generate fake diff based on commit hash
+            diffContent = `diff --git a/file-${commit.substring(0,5)}.txt b/file-${commit.substring(0,5)}.txt
+index 3333333..4444444 100644
+--- a/file-${commit.substring(0,5)}.txt
++++ b/file-${commit.substring(0,5)}.txt
+@@ -1,4 +1,6 @@
+ File with commit: ${commit}
++This line was added in commit ${commit}
+ This line exists in both versions
+-This line was removed in commit ${commit}
++This line replaced the removed line
++Another new line added in this commit
+ Last line of the file`;
+          }
+      diffViewer.diffText = diffContent;
+      diffViewer.commitHash = commitHashInput.value.trim();
+    });
+  });
+</script>
+
+</head>
+<body>
+  <h1>Sketch Diff Viewer Demo</h1>
+  
+  <div class="control-panel">
+    <label for="commitHash">Commit Hash (leave empty for unstaged changes):</label>
+    <input type="text" id="commitHash" placeholder="Enter commit hash">
+    <button id="viewDiff">View Diff</button>
+  </div>
+  
+  <sketch-diff-view id="diffViewer"></sketch-diff-view>
+  
+</body>
+</html>
\ No newline at end of file