diff --git a/apps/designer/app/canvas/canvas.tsx b/apps/designer/app/canvas/canvas.tsx
index f5b3d76933..ce422c4fc1 100644
--- a/apps/designer/app/canvas/canvas.tsx
+++ b/apps/designer/app/canvas/canvas.tsx
@@ -46,6 +46,7 @@ import { usePublishScrollState } from "./shared/use-publish-scroll-state";
 import { useDragAndDrop } from "./shared/use-drag-drop";
 import { setInstanceChildrenMutable } from "~/shared/tree-utils";
 import { CanvasData } from "~/shared/db";
+import { useDesignerReady } from "./shared/use-designer-ready";
 
 registerContainers();
 
@@ -118,6 +119,7 @@ export const Canvas = ({ data }: CanvasProps): JSX.Element | null => {
   if (data.tree === null) {
     throw new Error("Tree is null");
   }
+  const isDesignerReady = useDesignerReady();
   useInitializeBreakpoints(data.breakpoints);
   globalStyles();
   useAllUserProps(data.props);
@@ -129,7 +131,7 @@ export const Canvas = ({ data }: CanvasProps): JSX.Element | null => {
 
   if (elements === undefined) return null;
 
-  if (isPreviewMode) {
+  if (isPreviewMode || isDesignerReady === false) {
     return elements;
   }
 
diff --git a/apps/designer/app/canvas/shared/use-designer-ready.ts b/apps/designer/app/canvas/shared/use-designer-ready.ts
new file mode 100644
index 0000000000..81108a26f8
--- /dev/null
+++ b/apps/designer/app/canvas/shared/use-designer-ready.ts
@@ -0,0 +1,16 @@
+import { useState } from "react";
+import { useSubscribe } from "~/shared/pubsub";
+
+declare module "~/shared/pubsub" {
+  export interface PubsubMap {
+    designerReady: undefined;
+  }
+}
+
+export const useDesignerReady = () => {
+  const [isReady, setIsReady] = useState<boolean>(false);
+  useSubscribe("designerReady", () => {
+    setIsReady(true);
+  });
+  return isReady;
+};
diff --git a/apps/designer/app/designer/designer.tsx b/apps/designer/app/designer/designer.tsx
index a268d51991..f3108aacaa 100644
--- a/apps/designer/app/designer/designer.tsx
+++ b/apps/designer/app/designer/designer.tsx
@@ -232,8 +232,11 @@ export const Designer = ({ config, project }: DesignerProps) => {
       publishRef.current = ref;
       onRefReadCanvasWidth(ref);
       onRefReadCanvas(ref);
+      // We publish this even to let canvas know that we are now listening to the events, otherwise if canvas loads faster than designer, which is possible with SSR,
+      // we can miss the events and designer will just not connect to the canvas.
+      publish({ type: "designerReady" });
     },
-    [publishRef, onRefReadCanvasWidth, onRefReadCanvas]
+    [publishRef, onRefReadCanvasWidth, onRefReadCanvas, publish]
   );
 
   return (