diff --git a/apps/client/src/widgets/type_widgets/canvas.ts b/apps/client/src/widgets/type_widgets/canvas.ts
index 01bccddb3..e81e8a36f 100644
--- a/apps/client/src/widgets/type_widgets/canvas.ts
+++ b/apps/client/src/widgets/type_widgets/canvas.ts
@@ -6,6 +6,7 @@ import type { LibraryItem } from "@excalidraw/excalidraw/types";
 import type { Theme } from "@excalidraw/excalidraw/element/types";
 import type Canvas from "./canvas_el.js";
 import { CanvasContent } from "./canvas_el.js";
+import { renderReactWidget } from "../react/ReactBasicWidget.jsx";
 
 const TPL = /*html*/`
     <div class="canvas-widget note-detail-canvas note-detail-printable note-detail">
@@ -184,7 +185,8 @@ export default class ExcalidrawTypeWidget extends TypeWidget {
         });
 
         await setupFonts();
-        this.canvasInstance.renderCanvas(renderElement);
+        const canvasEl = renderReactWidget(this, this.canvasInstance.createCanvasElement())[0];
+        renderElement.replaceChildren(canvasEl);
     }
 
     /**
diff --git a/apps/client/src/widgets/type_widgets/canvas_el.tsx b/apps/client/src/widgets/type_widgets/canvas_el.tsx
index 9208f3093..4daac42b3 100644
--- a/apps/client/src/widgets/type_widgets/canvas_el.tsx
+++ b/apps/client/src/widgets/type_widgets/canvas_el.tsx
@@ -1,6 +1,5 @@
 import "@excalidraw/excalidraw/index.css";
 import { Excalidraw, getSceneVersion, exportToSvg } from "@excalidraw/excalidraw";
-import { render, unmountComponentAtNode } from "preact/compat";
 import { AppState, BinaryFileData, ExcalidrawImperativeAPI, ExcalidrawProps, LibraryItem } from "@excalidraw/excalidraw/types";
 import { ExcalidrawElement, NonDeletedExcalidrawElement, Theme } from "@excalidraw/excalidraw/element/types";
 
@@ -26,27 +25,22 @@ export default class Canvas {
         this.initializedPromise = $.Deferred();
     }
 
-    renderCanvas(targetEl: HTMLElement) {
-        unmountComponentAtNode(targetEl);
-        render(this.createCanvasElement({
-            ...this.opts,
-            excalidrawAPI: (api: ExcalidrawImperativeAPI) => {
-                this.excalidrawApi = api;
-                this.initializedPromise.resolve();
-            },
-        }), targetEl);
-    }
-
     async waitForApiToBecomeAvailable() {
         while (!this.excalidrawApi) {
             await this.initializedPromise;
         }
     }
 
-    private createCanvasElement(opts: ExcalidrawProps) {
+    createCanvasElement() {
         return (
             <div className="excalidraw-wrapper">
-                <Excalidraw {...opts} />
+                <Excalidraw
+                    {...this.opts}
+                    excalidrawAPI={api => {
+                        this.excalidrawApi = api;
+                        this.initializedPromise.resolve();
+                    }}
+                />
             </div>
         );
     }