diff --git a/webui/src/web-components/demo/sketch-diff2-view.demo.ts b/webui/src/web-components/demo/sketch-diff2-view.demo.ts
new file mode 100644
index 0000000..6a7cda8
--- /dev/null
+++ b/webui/src/web-components/demo/sketch-diff2-view.demo.ts
@@ -0,0 +1,73 @@
+import { DemoModule } from "./demo-framework/types";
+import { demoUtils } from "./demo-fixtures/index";
+
+const demo: DemoModule = {
+  title: "Sketch Monaco Diff View Demo",
+  description:
+    "Monaco-based diff view with range and file pickers using mock data",
+  imports: ["../sketch-diff2-view.ts"],
+
+  customStyles: `
+    .demo-container {
+      display: flex;
+      height: 80vh;
+      min-height: 600px;
+      border: 1px solid #ddd;
+      margin-top: 20px;
+      margin-bottom: 30px;
+    }
+
+    sketch-diff2-view {
+      width: 100%;
+      height: 100%;
+    }
+  `,
+
+  setup: async (container: HTMLElement) => {
+    // Import the mock service
+    const { MockGitDataService } = await import("./mock-git-data-service");
+
+    const section = demoUtils.createDemoSection(
+      "Monaco Diff View",
+      "Demonstrates the Monaco-based diff view with range and file pickers using mock data to simulate real API responses.",
+    );
+
+    // Create control panel
+    const controlPanel = document.createElement("div");
+    controlPanel.className = "control-panel";
+    controlPanel.style.marginBottom = "1rem";
+    controlPanel.style.padding = "1rem";
+    controlPanel.style.backgroundColor = "#f0f0f0";
+    controlPanel.style.borderRadius = "4px";
+    controlPanel.innerHTML = `
+      <p><strong>Features:</strong></p>
+      <ul>
+        <li>Monaco editor integration for syntax highlighting</li>
+        <li>Side-by-side diff view</li>
+        <li>Git range and file picker functionality</li>
+        <li>Mock data service for demonstration</li>
+      </ul>
+    `;
+
+    // Create demo container
+    const demoContainer = document.createElement("div");
+    demoContainer.className = "demo-container";
+
+    // Create the diff2 view component
+    const diff2View = document.createElement("sketch-diff2-view");
+
+    // Create and set up mock service
+    const mockService = new MockGitDataService();
+    console.log("Demo initialized with MockGitDataService");
+
+    // Set the git service property
+    diff2View.gitService = mockService;
+
+    demoContainer.appendChild(diff2View);
+    section.appendChild(controlPanel);
+    section.appendChild(demoContainer);
+    container.appendChild(section);
+  },
+};
+
+export default demo;