Media

Image displays a bitmap, system symbol, or inline SVG from a URL, an asset name, or base64 data. 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 } | { image: 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

Base64-encoded image data.

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.

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 })

Template rendering with foreground color

Image({ systemName: "envelope.fill" })
    .renderingMode("template")
    .imageScale("large")
    .foregroundStyle(Color("blue"))

Pixel-art interpolation

Image({ name: "pixel-art" })
    .resizable()
    .interpolation("none")
    .frame({ width: 200, height: 200 })

Multicolor system symbol

Image({ systemName: "cloud.sun.rain.fill" })
    .symbolRenderingMode("multicolor")

Video

Plays video from a URL or asset name 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

Local video asset name.

boolean

Whether the video starts playing automatically. Defaults to false.

boolean

Whether the video is muted. Defaults to false.

boolean

Whether playback controls are shown. Defaults to true.

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)

Local video asset

Video({ video: "intro.mp4" })

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. Supports common formats like .glb, .gltf, and .usdz.

string

iOS-specific URL for the model, typically a .usdz file optimized for Apple platforms. When provided, iOS uses this URL while other platforms use url.

string

Accessibility description of the 3D model for screen readers.

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 })

.usdz format is recommended for iOS AR Quick Look integration. .glb / .gltf formats provide good cross-platform compatibility. 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