diff --git a/webui/src/web-components/sketch-monaco-view.ts b/webui/src/web-components/sketch-monaco-view.ts
index 03b6744..4b46c0e 100644
--- a/webui/src/web-components/sketch-monaco-view.ts
+++ b/webui/src/web-components/sketch-monaco-view.ts
@@ -672,8 +672,15 @@
 
       // First time initialization
       if (!this.editor) {
+        // Ensure the container ref is available
+        if (!this.container.value) {
+          throw new Error(
+            "Container element not available - component may not be fully rendered",
+          );
+        }
+
         // Create the diff editor with auto-sizing configuration
-        this.editor = monaco.editor.createDiffEditor(this.container.value!, {
+        this.editor = monaco.editor.createDiffEditor(this.container.value, {
           automaticLayout: false, // We'll resize manually
           readOnly: true,
           theme: "vs", // Always use light mode
@@ -1171,7 +1178,8 @@
         }, 100);
       } else {
         // If the editor isn't initialized yet but we received content,
-        // initialize it now
+        // ensure we're connected before initializing
+        await this.ensureConnectedToDocument();
         await this.initializeEditor();
       }
     }
@@ -1275,6 +1283,9 @@
 
   // Add resize observer to ensure editor resizes when container changes
   async firstUpdated() {
+    // Ensure we're connected to the document before Monaco initialization
+    await this.ensureConnectedToDocument();
+
     // Initialize the editor
     await this.initializeEditor();
 
@@ -1293,6 +1304,30 @@
     }
   }
 
+  /**
+   * Ensure this component and its container are properly connected to the document.
+   * Monaco editor requires the container to be in the document for proper initialization.
+   */
+  private async ensureConnectedToDocument(): Promise<void> {
+    // Wait for our own render to complete
+    await this.updateComplete;
+
+    // Verify the container ref is available
+    if (!this.container.value) {
+      throw new Error("Container element not available after updateComplete");
+    }
+
+    // Check if we're connected to the document
+    if (!this.isConnected) {
+      throw new Error("Component is not connected to the document");
+    }
+
+    // Verify the container is also in the document
+    if (!this.container.value.isConnected) {
+      throw new Error("Container element is not connected to the document");
+    }
+  }
+
   private _resizeObserver: ResizeObserver | null = null;
   private _windowResizeHandler: (() => void) | null = null;