diff --git a/apps/builder/app/canvas/features/webstudio-component/webstudio-component.tsx b/apps/builder/app/canvas/features/webstudio-component/webstudio-component.tsx
index cadca83d06..c3bd68dd60 100644
--- a/apps/builder/app/canvas/features/webstudio-component/webstudio-component.tsx
+++ b/apps/builder/app/canvas/features/webstudio-component/webstudio-component.tsx
@@ -29,6 +29,7 @@ import {
   textContentAttribute,
   descendantComponent,
 } from "@webstudio-is/react-sdk";
+import { rawTheme } from "@webstudio-is/design-system";
 import {
   $propValuesByInstanceSelector,
   getIndexedInstanceId,
@@ -100,19 +101,26 @@ const ContentEditable = ({
   return renderComponentWithRef(ref);
 };
 
-const StubComponent = forwardRef<HTMLDivElement, { children?: ReactNode }>(
-  (props, ref) => {
-    return (
-      <div
-        {...props}
-        ref={ref}
-        style={{ display: props.children ? "contents" : "block" }}
-      />
-    );
-  }
-);
+const MissingComponentStub = forwardRef<
+  HTMLDivElement,
+  { children?: ReactNode }
+>((props, ref) => {
+  return (
+    <div
+      {...props}
+      ref={ref}
+      style={{
+        padding: rawTheme.spacing[5],
+        border: `1px solid ${rawTheme.colors.borderDestructiveMain}`,
+        color: rawTheme.colors.foregroundDestructive,
+      }}
+    >
+      Component {props[componentAttribute as never]} does not exist
+    </div>
+  );
+});
 
-StubComponent.displayName = "StubComponent";
+MissingComponentStub.displayName = "MissingComponentStub";
 
 // this utility is temporary solution to compute instance selectors
 // for rich text subtree which cannot have slots so its safe to traverse ancestors
@@ -333,7 +341,8 @@ export const WebstudioComponentCanvas = forwardRef<
   }
 
   const Component =
-    components.get(instance.component) ?? (StubComponent as AnyComponent);
+    components.get(instance.component) ??
+    (MissingComponentStub as AnyComponent);
 
   const props: {
     [componentAttribute]: string;