Placeholder - Metabind

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.

​Support

​Usage

​Basic placeholder with fallback

​Platform-specific component

​With passed props

​Notes

​See Also