Media

Image displays a bitmap, system symbol, or inline SVG from a URL or an asset name. Video plays remote or local video with autoplay, muting, looping, and controls options. Model3D renders an interactive 3D model with optional camera controls and auto-rotation.

Image

Displays an image from a URL, asset name, system icon, or inline SVG.

Image(props: ImageProps): Image;

The ImageProps type is a union requiring exactly one image source, plus an optional contentMode:

type ImageProps = { contentMode?: "fit" | "fill" } &
    ({ name: string } | { systemName: string } | { url: string } | { svg: string });

"fit" | "fill"

How the image should be scaled to fit its container.

string

Name of an image asset in the app bundle.

string

Name of a system-provided symbol (SF Symbols on iOS).

string

URL of a remote image to load.

string

Inline SVG markup as a string.

The Image component returns an extended Image interface with image-specific chainable methods in addition to the standard Component modifiers:

() => Image

Makes the image resizable so it fills its frame. Required for .frame() to affect image size.

(mode: "original" | "template") => Image

Controls how the image is rendered. "original" preserves the image’s original colors; "template" renders as a single color using the current foreground style.

(quality: "none" | "low" | "medium" | "high") => Image

Sets the interpolation quality for scaled images.

(isAntialiased?: boolean) => Image

Enables or disables antialiasing on image edges. Defaults to true if called without arguments.

(mode: "monochrome" | "hierarchical" | "palette" | "multicolor") => Image

Sets how multi-layer system symbols are rendered.

(scale: "small" | "medium" | "large") => Image

Sets the symbol scale relative to adjacent text.

No renderer implements .renderingMode(), .interpolation(), .antialiased(), .symbolRenderingMode(), or .imageScale() yet. Calling them has no effect.

Image from URL

Image({ url: "https://example.com/photo.jpg" })
    .resizable()
    .scaledToFit()
    .frame({ height: 200 })

System symbol

Image({ systemName: "star.fill" })
    .foregroundStyle(Color("yellow"))

Asset image

Image({ name: "hero-image" })
    .resizable()
    .scaledToFill()
    .frame({ width: 300, height: 200 })
    .clipped()

Inline SVG

Image({ svg: "<svg viewBox='0 0 100 100'><circle cx='50' cy='50' r='40' fill='blue'/></svg>" })
    .resizable()
    .frame({ width: 100, height: 100 })

Resizable with frame

Image({ url: "https://example.com/photo.jpg" })
    .resizable()
    .frame({ width: 200, height: 200 })

Video

Plays video from a URL or an asset with configurable playback options.

Video(props: VideoProps): Component;

The VideoProps type requires either a url or video source, plus optional playback settings:

type VideoProps = { autoplay?: boolean; muted?: boolean; controls?: boolean; loop?: boolean; contentMode?: "fit" | "fill" } &
    ({ url: string } | { video: string });

string

URL of a remote video to load.

string

An asset id. Only the web renderer in Studio resolves it. iOS does not play a video string, and on Android a Video without url throws. To play an asset on every platform, pass its URL to url.

boolean

Whether the video starts playing automatically. Defaults to false.

boolean

Whether the video is muted. Defaults to false on iOS and Android and true on web.

boolean

Whether playback controls are shown. Defaults to true on iOS and web and false on Android.

boolean

Whether the video loops continuously. Defaults to false.

"fit" | "fill"

How the video is scaled within its frame. Defaults to "fit".

Basic video

Video({ url: "https://example.com/video.mp4" })

Autoplay background video

Video({
    url: "https://example.com/hero.mp4",
    autoplay: true,
    muted: true,
    loop: true,
    controls: false,
    contentMode: "fill"
})
    .frame({ height: 300 })
    .cornerRadius(12)

Video asset

// clip: PropertyAsset({ title: "Clip", assetTypes: ["video"] })
Video({ url: props.clip.video.url })

Fit content mode

Video({ url: "https://example.com/video.mp4", contentMode: "fit" })
    .frame({ width: 400, height: 300 })

Fill content mode

Video({ url: "https://example.com/video.mp4", contentMode: "fill" })
    .frame({ width: 400, height: 300 })
    .clipped()

Model3D

Displays an interactive 3D model from a URL.

Model3D(props: Model3DProps): Component;

type Model3DProps = {
    url: string;
    iOSURL?: string;
    description?: string;
    cameraControls: boolean;
    autoRotate: boolean;
};

string

required

URL to the 3D model file, in .glb or .gltf format.

string

URL of a .usdz file. The web renderer passes it to <model-viewer> for AR Quick Look in Safari on iOS. The iOS and Android renderers ignore it.

string

Accessibility description of the 3D model for screen readers. Only the web renderer reads it.

boolean

required

Whether the user can zoom, pan, and rotate the camera to examine the model.

boolean

required

Whether the model automatically rotates for showcase purposes.

Basic 3D model

Model3D({
    url: "https://example.com/models/chair.glb",
    cameraControls: true,
    autoRotate: false
})

Auto-rotating product showcase

Model3D({
    url: "https://example.com/models/shoe.glb",
    iOSURL: "https://example.com/models/shoe.usdz",
    description: "Running shoe 3D model",
    cameraControls: true,
    autoRotate: true
})
    .frame({ height: 400 })

Static display

Model3D({
    url: "https://example.com/models/logo.glb",
    cameraControls: false,
    autoRotate: true
})
    .frame({ width: 200, height: 200 })

The iOS renderer loads .glb and .gltf files, not .usdz. Auto-rotate is useful for product showcases where user interaction is not required.

Introduction

Authoring

Components

Components — iOS Extensions

Components — Web Extensions

Modifiers

Modifiers — iOS Extensions

Hooks and Globals

Styles

Types

Image

Video

Model3D

See also

​Image

​Video

​Model3D

​See also

Image

Video

Model3D

See also