Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.metabind.ai/llms.txt

Use this file to discover all available pages before exploring further.

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 });
​
contentMode
"fit" | "fill"
How the image should be scaled to fit its container.
​
name
string
Name of an image asset in the app bundle.
​
systemName
string
Name of a system-provided symbol (SF Symbols on iOS).
​
url
string
URL of a remote image to load.
​
image
string
Base64-encoded image data.
​
svg
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:
​
.resizable()
() => Image
Makes the image resizable so it fills its frame. Required for .frame() to affect image size.
​
.renderingMode(mode)
(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.
​
.interpolation(quality)
(quality: "none" | "low" | "medium" | "high") => Image
Sets the interpolation quality for scaled images.
​
.antialiased(isAntialiased?)
(isAntialiased?: boolean) => Image
Enables or disables antialiasing on image edges. Defaults to true if called without arguments.
​
.symbolRenderingMode(mode)
(mode: "monochrome" | "hierarchical" | "palette" | "multicolor") => Image
Sets how multi-layer system symbols are rendered.
​
.imageScale(scale)
(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 });
​
url
string
URL of a remote video to load.
​
video
string
Local video asset name.
​
autoplay
boolean
Whether the video starts playing automatically. Defaults to false.
​
muted
boolean
Whether the video is muted. Defaults to false.
​
controls
boolean
Whether playback controls are shown. Defaults to true.
​
loop
boolean
Whether the video loops continuously. Defaults to false.
​
contentMode
"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;
};
​
url
string
required
URL to the 3D model file. Supports common formats like .glb, .gltf, and .usdz.
​
iOSURL
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.
​
description
string
Accessibility description of the 3D model for screen readers.
​
cameraControls
boolean
required
Whether the user can zoom, pan, and rotate the camera to examine the model.
​
autoRotate
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.

​
See also

  • Text — captions and overlays for media
  • Markdown — render rich text alongside media
  • ZStack — overlay text or controls onto media
  • LinearGradient — readability gradient over images