The HTML <model> element is a native browser element that lets web developers embed interactive 3D USDZ models in Safari on iOS, iPadOS, and macOS — no JavaScript library required. It was previously visionOS-only and now ships across all Apple platforms in iOS/iPadOS/macOS 2026.
• Native 3D in Safari with zero dependencies — drop a <model src="file.usdz"> tag and get interactive orbit, AR Quick Look, and stereoscopic visionOS rendering out of the box
• Replaces third-party libraries like model-viewer with a platform-rendered element that is smaller, faster, and future-proof as a W3C emerging standard
• Built-in AR Quick Look integration: wrap <model> in <a rel="ar"> and iPhone/iPad users immediately get real-world AR preview
A WKWebView-based SwiftUI wrapper that loads an inline HTML page using the native <model> element to display a USDZ file with orbit interaction and an AR Quick Look fallback link.
import SwiftUI
import WebKit
struct ModelElementView: UIViewRepresentable {
let usdзURL: String
let fallbackImageURL: String
func makeUIView(context: Context) -> WKWebView {
let config = WKWebViewConfiguration()
config.allowsInlineMediaPlayback = true
let webView = WKWebView(frame: .zero, configuration: config)
webView.scrollView.isScrollEnabled = false
webView.isOpaque = false
webView.backgroundColor = .clear
return webView
}
func updateUIView(_ webView: WKWebView, context: Context) {
let html = """
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body { margin: 0; background: #f2f2f7; display: flex;
flex-direction: column; align-items: center;
font-family: -apple-system, sans-serif; padding: 16px; }
model {
width: 320px;
height: 320px;
background-color: #ffffff;
border-radius: 16px;
}
#spinner { font-size: 14px; color: #888; margin-top: 8px; }
.controls { margin-top: 12px; display: flex; gap: 8px; }
button {
padding: 8px 16px;
border-radius: 8px;
border: none;
background: #007aff;
color: white;
font-size: 14px;
}
a.ar-link {
margin-top: 12px;
padding: 10px 20px;
background: #34c759;
color: white;
border-radius: 8px;
text-decoration: none;
font-size: 14px;
}
</style>
</head>
<body>
<p id="spinner">Loading 3D model…</p>
<!-- Native HTML Model Element with orbit interaction -->
<model id="myModel"
src="\(usdzURL)"
stagemode="orbit">
<!-- Fallback for browsers without Model element support -->
<img src="\(fallbackImageURL)"
alt="Product preview"
width="320" height="320"
style="border-radius:16px;object-fit:cover">
</model>
<!-- AR Quick Look: wrap model source in <a rel=ar> -->
<a class="ar-link"
href="\(usdzURL)"
rel="ar">
View in AR
</a>
<div class="controls">
<button onclick="showSide()">Side View</button>
<button onclick="resetView()">Reset</button>
</div>
<script>
const model = document.getElementById('myModel');
const spinner = document.getElementById('spinner');
let initialTransform = null;
// Await the ready promise before interacting
model.ready
.then(() => {
spinner.textContent = 'Interactive 3D model';
initialTransform = model.entityTransform;
})
.catch(() => {
spinner.textContent = 'Could not load model';
});
function showSide() {
// Disable orbit to allow manual transform
model.removeAttribute('stagemode');
const m = new DOMMatrix();
m.rotateSelf(0, 135, 0);
model.entityTransform = m;
}
function resetView() {
if (initialTransform) {
model.entityTransform = initialTransform;
}
model.setAttribute('stagemode', 'orbit');
}
</script>
</body>
</html>
"""
webView.loadHTMLString(html, baseURL: nil)
}
}
struct ContentView: View {
var body: some View {
VStack(spacing: 0) {
Text("Camping Mallet")
.font(.title2.bold())
.padding(.top, 24)
ModelElementView(
usdzURL: "https://example.com/models/mallet.usdz",
fallbackImageURL: "https://example.com/images/mallet.jpg"
)
.frame(height: 480)
Spacer()
}
.background(Color(uiColor: .systemGroupedBackground))
}
}
#Preview {
ContentView()
}Liquid Glass is Apple's new material and visual design language introduced in iOS 27, bringing translucent, refractive glass-like surfaces to system and custom UI elements. It replaces the frosted vibrancy aesthetic with a more dynamic, depth-aware material that responds to content beneath it.
PaperKit is Apple's full-featured canvas framework — previously internal-only — now publicly available in iOS/macOS/visionOS 27. It powers the drawing and markup experience in Notes, Preview, and Freeform, giving developers access to a complete pencil, shapes, images, and text canvas with a rich data model.
Xcode 27 introduces a fully customizable toolbar and theme system, untitled scratch projects, coding agent integration directly in the editor, and the new Device Hub for evaluating apps across simulators and physical devices side-by-side.
In-depth guide
SwiftUI & Liquid Glass in iOS 27 →The model background is always opaque even if you specify a transparent color; orbit stagemode rescales the model to prevent clipping; entityTransform requires stagemode to be absent or set to 'none'; the ready promise must be awaited before manipulating the element programmatically; usdcrush and usdrecord CLI tools are macOS-only
Stereoscopic rendering requires Apple Vision Pro; AR Quick Look requires iOS/iPadOS device with LiDAR or A12+; some polyfill features unavailable on non-Apple browsers
iOS 27 introduces new SwiftUI drag and drop APIs including reorderable, reorderContainer, dragContainer, and configuration modifiers that enable reordering within and across collections, multi-item drag, and fine-grained control over how data is transferred during drag and drop operations.