}
;
};
if (statuses == null) {
return null;
}
return
{Object.entries(statuses).map(([platform, value]) => renderCard(platform, value))}
;
};
export const ComposeJS = ({code, name, height}) => {
const encodedCode = useMemo(() => {
if (!code) return "";
try {
return btoa(code);
} catch (e) {
console.error("Failed to encode code", e);
return "";
}
}, [code]);
if (!encodedCode) {
return null;
}
return ;
};
`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.
```typescript theme={null}
Image(props: ImageProps): Image;
```
The `ImageProps` type is a union requiring exactly one image source, plus an optional `contentMode`:
```typescript theme={null}
type ImageProps = { contentMode?: "fit" | "fill" } &
({ name: string } | { systemName: string } | { url: string } | { image: string } | { svg: string });
```
How the image should be scaled to fit its container.
Name of an image asset in the app bundle.
Name of a system-provided symbol (SF Symbols on iOS).
URL of a remote image to load.
Base64-encoded image data.
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:
Makes the image resizable so it fills its frame. Required for `.frame()` to affect image size.
Controls how the image is rendered. `"original"` preserves the image's original colors; `"template"` renders as a single color using the current foreground style.
Sets the interpolation quality for scaled images.
Enables or disables antialiasing on image edges. Defaults to `true` if called without arguments.
Sets how multi-layer system symbols are rendered.
Sets the symbol scale relative to adjacent text.
**Image from URL**
```typescript theme={null}
Image({ url: "https://example.com/photo.jpg" })
.resizable()
.scaledToFit()
.frame({ height: 200 })
```
**System symbol**
```typescript theme={null}
Image({ systemName: "star.fill" })
.foregroundStyle(Color("yellow"))
```
**Asset image**
```typescript theme={null}
Image({ name: "hero-image" })
.resizable()
.scaledToFill()
.frame({ width: 300, height: 200 })
.clipped()
```
**Inline SVG**
```typescript theme={null}
Image({ svg: "" })
.resizable()
.frame({ width: 100, height: 100 })
```
**Resizable with frame**
```typescript theme={null}
Image({ url: "https://example.com/photo.jpg" })
.resizable()
.frame({ width: 200, height: 200 })
```
**Template rendering with foreground color**
```typescript theme={null}
Image({ systemName: "envelope.fill" })
.renderingMode("template")
.imageScale("large")
.foregroundStyle(Color("blue"))
```
**Pixel-art interpolation**
```typescript theme={null}
Image({ name: "pixel-art" })
.resizable()
.interpolation("none")
.frame({ width: 200, height: 200 })
```
**Multicolor system symbol**
```typescript theme={null}
Image({ systemName: "cloud.sun.rain.fill" })
.symbolRenderingMode("multicolor")
```
## Video
Plays video from a URL or asset name with configurable playback options.
```typescript theme={null}
Video(props: VideoProps): Component;
```
The `VideoProps` type requires either a `url` or `video` source, plus optional playback settings:
```typescript theme={null}
type VideoProps = { autoplay?: boolean; muted?: boolean; controls?: boolean; loop?: boolean; contentMode?: "fit" | "fill" } &
({ url: string } | { video: string });
```
URL of a remote video to load.
Local video asset name.
Whether the video starts playing automatically. Defaults to `false`.
Whether the video is muted. Defaults to `false`.
Whether playback controls are shown. Defaults to `true`.
Whether the video loops continuously. Defaults to `false`.
How the video is scaled within its frame. Defaults to `"fit"`.
**Basic video**
```typescript theme={null}
Video({ url: "https://example.com/video.mp4" })
```
**Autoplay background video**
```typescript theme={null}
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**
```typescript theme={null}
Video({ video: "intro.mp4" })
```
**Fit content mode**
```typescript theme={null}
Video({ url: "https://example.com/video.mp4", contentMode: "fit" })
.frame({ width: 400, height: 300 })
```
**Fill content mode**
```typescript theme={null}
Video({ url: "https://example.com/video.mp4", contentMode: "fill" })
.frame({ width: 400, height: 300 })
.clipped()
```
## Model3D
Displays an interactive 3D model from a URL.
```typescript theme={null}
Model3D(props: Model3DProps): Component;
```
```typescript theme={null}
type Model3DProps = {
url: string;
iOSURL?: string;
description?: string;
cameraControls: boolean;
autoRotate: boolean;
};
```
URL to the 3D model file. Supports common formats like `.glb`, `.gltf`, and `.usdz`.
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`.
Accessibility description of the 3D model for screen readers.
Whether the user can zoom, pan, and rotate the camera to examine the model.
Whether the model automatically rotates for showcase purposes.
**Basic 3D model**
```typescript theme={null}
Model3D({
url: "https://example.com/models/chair.glb",
cameraControls: true,
autoRotate: false
})
```
**Auto-rotating product showcase**
```typescript theme={null}
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**
```typescript theme={null}
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](/bindjs/components/Text) — captions and overlays for media
* [Markdown](/bindjs/components/Markdown) — render rich text alongside media
* [ZStack](/bindjs/components/ZStack) — overlay text or controls onto media
* [LinearGradient](/bindjs/styles/LinearGradient) — readability gradient over images