Skip to main content
Placeholder(props: PlaceholderProps, children: Component[]): Component;

type PlaceholderProps = {
    name?: string;
    props?: Record<string, any>;
    title?: string;
    validPlatforms?: Platform[];
};
​
name
string
Name used to resolve the native component from the host app’s component registry.
​
props
Record<string, any>
Props passed through to the native component.
​
title
string
Display title shown in the web preview.
​
validPlatforms
Platform[]
Platforms where the native component is available. Options: "iOS", "macOS", "watchOS", "tvOS", "visionOS", "web", "android".
​
children
Component[]
required
Fallback content displayed when the native component is not registered or not available on the current platform.

​
Support

​
Usage

​
Basic placeholder with fallback

Placeholder(
    { name: "MapView", props: { latitude: 37.7749 } },
    [Text("Map not available")]
)

​
Platform-specific component

Placeholder(
    {
        name: "ARView",
        title: "AR View",
        validPlatforms: ["iOS", "visionOS"]
    },
    [
        VStack([
            Image({ systemName: "arkit" }),
            Text("AR is available on iOS and visionOS only")
                .font("caption")
        ])
    ]
)

​
With passed props

Placeholder(
    {
        name: "NativeVideoPlayer",
        props: { url: "https://example.com/video.mp4", autoplay: true },
        title: "Video Player"
    },
    [Text("Video playback not available")]
)

​
Notes

  • The host app registers native views by name. At runtime, if a component matching name is found in the registry, it renders natively. Otherwise, the children are displayed as fallback.
  • On the web preview in the Composer, the title is displayed to identify the placeholder.

​
See Also

  • Image — image display
  • Video — video playback