Check for empty slots

isEmptySlot(node)

Call isEmptySlot from @webflow/react to check whether a Slot prop has children.

Use isEmptySlot when you need to:

• Render fallback content when a designer hasn’t added children to a slot.
• Hide a wrapper when a slot is empty.

Syntax

isEmptySlot(node: React.ReactNode): boolean;

Parameters

Returns

true if the slot is empty. false if the slot has children.

isEmptySlot also returns true when node is null or undefined. That covers rendering the component outside Webflow, such as local development or tests.

Limitations

• isEmptySlot reports a slot as filled if it has children, even when those children render nothing. An empty fragment or a child hidden by a visibility binding still counts as filled.
• Only Slot props (props.Slot or props.Children) report emptiness. Rich Text and Text Node props always report as filled.

Best practices

Render fallback content next to the slot, not instead of it. Replacing the slot removes the Designer drop target.

Examples

Render fallback content next to a slot

In this example, the card still mounts the slot so designers can drop content. When the slot is empty, it also shows fallback text.

import { type ReactNode } from "react";
import { declareComponent, isEmptySlot } from "@webflow/react";
import { props } from "@webflow/data-types";
function Card({ content }: { content: ReactNode }) {
  return (
    <div>
      {content}
      {isEmptySlot(content) ? <p>Drop content here</p> : null}
    </div>
  );
}
export default declareComponent(Card, {
  name: "Card",
  props: {
    content: props.Slot({ name: "Content" }),
  },
});

Wrap a component that treats missing content as empty

If an existing component renders its own placeholder when content is null or undefined, wrap it for Webflow. Pass null for empty slots. Default the edit prop to true so the slot stays mounted as a Designer drop target. Turn edit off to preview how the wrapped component handles empty content.

import { type ReactNode } from "react";
import { declareComponent, isEmptySlot } from "@webflow/react";
import { props } from "@webflow/data-types";
import { Card } from "./Card"; // Existing component that treats missing content as empty.
function CardWebflow({ edit, content }: { edit: boolean; content: ReactNode }) {
  if (edit) {
    return <>{content}</>;
  }
  return <Card content={isEmptySlot(content) ? null : content} />;
}
export default declareComponent(CardWebflow, {
  name: "Card",
  props: {
    edit: props.Boolean({
      name: "Edit",
      defaultValue: true,
      tooltip:
        "Shows the slot so you can drop content. Turn off to preview the empty state.",
    }),
    content: props.Slot({ name: "Content" }),
  },
});