diff --git a/frontend/excalidraw-editor.html b/frontend/excalidraw-editor.html
index 6cea14e..57eeaef 100644
--- a/frontend/excalidraw-editor.html
+++ b/frontend/excalidraw-editor.html
@@ -106,7 +106,7 @@
   <!-- Single module script -->
   <script type="module">
     import React from "react";
-    import ReactDOM from "react-dom";
+    import ReactDOM from "react-dom/client";
     import { decompressFromBase64 } from "https://esm.sh/lz-string@1.5.0";
     import * as ExcalidrawLib from "https://esm.sh/@excalidraw/excalidraw@0.18.0?alias=react:react@18.3.1,react-dom:react-dom@18.3.1";
 
@@ -246,12 +246,22 @@
             currentTheme = msg.theme || "light";
             setTheme(currentTheme);
 
-            ReactDOM.createRoot(document.getElementById("root")).render(
-              React.createElement(App, {
-                initialData: initialData,
-                theme: currentTheme,
-              })
-            );
+            try {
+              if (typeof ReactDOM.createRoot !== "function") {
+                throw new Error("ReactDOM.createRoot is not available — check react-dom/client import");
+              }
+              ReactDOM.createRoot(document.getElementById("root")).render(
+                React.createElement(App, {
+                  initialData: initialData,
+                  theme: currentTheme,
+                })
+              );
+            } catch (renderErr) {
+              console.error("Excalidraw render failed:", renderErr);
+              loadingEl.textContent = "Error loading Excalidraw: " + renderErr.message;
+              loadingEl.style.color = "#f44336";
+              loadingEl.classList.remove("hidden");
+            }
           }
           break;