diff --git a/apps/client/src/widgets/type_widgets/canvas.ts b/apps/client/src/widgets/type_widgets/canvas.ts
index 6ce7a3b83..32bb1e325 100644
--- a/apps/client/src/widgets/type_widgets/canvas.ts
+++ b/apps/client/src/widgets/type_widgets/canvas.ts
@@ -20,6 +20,7 @@ const TPL = /*html*/`
 
         .excalidraw-wrapper {
             height: 100%;
+        }
 
         :root[dir="ltr"]
         .excalidraw
diff --git a/apps/client/src/widgets/type_widgets/canvas_el.ts b/apps/client/src/widgets/type_widgets/canvas_el.ts
index 814018519..8c7f5b752 100644
--- a/apps/client/src/widgets/type_widgets/canvas_el.ts
+++ b/apps/client/src/widgets/type_widgets/canvas_el.ts
@@ -1,7 +1,23 @@
 import "@excalidraw/excalidraw/index.css";
 import { Excalidraw } from "@excalidraw/excalidraw";
-import { h, render } from "preact";
+import { createElement, createRef, Fragment, render } from "preact/compat";
 
 export default function renderCanvas(targetEl: HTMLElement) {
-    render(h(Excalidraw, null, "Hello world"), targetEl);
+    render(createCanvasElement(), targetEl);
+}
+
+function createCanvasElement() {
+    const excalidrawWrapperRef = createRef<HTMLElement>();
+
+    return createElement(Fragment, null,
+        createElement(
+            "div",
+            {
+                className: "excalidraw-wrapper",
+                ref: excalidrawWrapperRef
+            },
+            createElement(Excalidraw, {
+
+            })
+        ));
 }