The HTML <model> Element Comes to Every Apple OS

At WWDC 2026, a Safari engineer dropped a 3D camping mallet onto an e-commerce product page with one tag, <model>, no JavaScript library, and let visitors rotate it with their finger.¹ The element that made that possible has shipped on visionOS for a while. The 2026 news is that the same markup now renders in Safari on iPhone, iPad, and Mac, and the JavaScript API around it grew up. Apple put it plainly: “We pioneered the Model element in visionOS… Now the Model element comes to iOS, iPadOS, and macOS! The same markup, the same element works across Apple’s platforms.”¹

The walkthrough below follows the drop-in 3D path the session lays out, from a static <img> fallback to orbit interaction, scripted transforms, baked-animation playback, and AR Quick Look. Everything here comes from WWDC 2026 session 215 directly.

TL;DR

• The <model> element debuted on visionOS earlier; WWDC 2026 expands it to iOS, iPadOS, and macOS Safari and matures the JavaScript API around it.¹
• A model embeds like media: point src at a USDZ file, add <source> tags with MIME types like <video>, and nest an <img> inside as fallback for browsers that do not yet support the element.¹
• The ready promise tells you when a model has loaded so you can swap out a spinner; a catch block shows fallback content on failure.¹
• The stagemode="orbit" attribute gives interactive rotation with one attribute; for scripted control, set stagemode="none" and drive entityTransform with a DOMMatrix built via rotateSelf.¹
• Baked animation plays through playbackRate plus play(), a negative rate runs it in reverse, and wrapping the model in <a rel="ar"> hands iOS and iPadOS visitors a full AR Quick Look experience.¹

What actually shipped

Aleksei from the Safari team frames the cross-platform expansion starting at 0:37.

The honest framing matters here. The <model> element is not brand new. Apple shipped it on visionOS first, where it carried built-in stereoscopic rendering so a product could feel like it had real depth on Apple Vision Pro.¹ WWDC 2026 does two things on top of that foundation: it brings the element to iOS, iPadOS, and macOS Safari, so “your 3D content reaches every Safari visitor whether they are on iPhone on the go, on iPad at the coffee shop, or on Mac at their desk,” and it fleshes out the JavaScript API that turns a static viewer into an interactive one.¹

The pitch against the status quo is direct. Most 3D on the web today runs through model-viewer, the popular JavaScript library. Apple’s argument: the native element needs no extra library, renders “directly by the platform,” and is “an emerging web standard, so your code is future-proof.”¹ Apple’s Safari team says it is “actively contributing to the model specification at the W3C” and invites feedback through the Immersive Web Community Group.¹ For browsers that do not yet support the element, the session points to a polyfill that “retrofits the API of a new standard via JavaScript,” with one caveat worth quoting: “some features of the element can not be polyfilled, such as the stereoscopic display on spatial platforms like Apple Vision Pro.”¹

The content format is USDZ, “Universal Scene Description, zipped into a single file” that “packages everything a 3D model needs: geometry, materials, textures, animations.”¹ Safari supports other formats, but the session recommends USDZ for the best experience.¹ Where the assets come from is a separate question. Apple recommends a Capture, Convert, Create approach, scanning real objects with an iPhone, converting existing files, or building from scratch in tools like Blender.¹ The session also notes that generative tools exist in the ecosystem; the apps named, Tripo3D and Meshy.ai, are third-party services, not Apple products.¹

Drop a model on the page

The element behaves like the media tags every web developer already knows. “Just like <img> tag or <video> tag, you point <model> tag at a file with the source attribute, and the browser handles the rest. No plugins required.”¹ You can also use a nested <source> tag with a MIME type, the same pattern as <video> (the session shows the pattern without naming the value; model/vnd.usdz+zip is the standard USDZ media type). The fallback is the part that makes adoption safe today: place an <img> inside the <model>, and older Safari versions or browsers without support render the image instead.¹

<model src="mallet.usdz">
  <source src="mallet.usdz" type="model/vnd.usdz+zip">
  <img src="mallet.jpg" alt="Camping mallet" width="480" height="480">
</model>

3D models can run “tens of megabytes or more,” so loading takes time.¹ The ready promise resolves when the model has actually loaded and is ready to display. Show a spinner while you wait, hide it when ready resolves, and handle anything unexpected in the catch block by revealing fallback content:

const model = document.querySelector("model");

try {
  await model.ready;
  spinner.hidden = true;       // model is loaded and ready to display
} catch (error) {
  spinner.hidden = true;
  fallback.hidden = false;     // show fallback content on failure
}

One rendering detail trips people up. The <model> element “is rendered in its own virtual space, so it won’t pick up the page’s background.”¹ To match your page design, set background-color directly on the model. The session adds a constraint: “the background is always rendered opaque, even if you specify a color with transparency it will be converted.”¹

Let visitors explore it

The cheapest interactivity costs one attribute. With stagemode="orbit", visitors “rotate the model freely side-to-side and if they tilt it up or down, it gently springs back to its original angle.”¹ The model also rescales slightly smaller so no parts get clipped during rotation.¹ For most product pages, that single attribute is the whole feature: “the orbit stagemode gets you interactive 3D with a single attribute.”¹

When you need exact angles, drive the model from JavaScript instead. The entityTransform property “lets you set exact viewing angles via JavaScript.”¹ To use it, disable orbit first, either remove the stagemode attribute or set it to "none".¹ The session warns that manual transforms can clip or hide parts of the model if rotated out of the visible area, so you may need to adjust position.¹ You build the orientation with a DOMMatrix, which “represents the model’s orientation in 3D space,” call rotateSelf to define the rotation, then assign it:

// disable orbit: <model stagemode="none"> in the markup

// capture the original orientation up front, for Reset
const initialTransform = model.entityTransform;

// Side view: rotate 135 degrees around the Y axis
sideButton.addEventListener("click", () => {
  const matrix = new DOMMatrix();
  matrix.rotateSelf(0, 135, 0);
  model.entityTransform = matrix;
});

// Reset to the original orientation
resetButton.addEventListener("click", () => {
  model.entityTransform = initialTransform;
});

Assigning a transform switches the view instantly. To smooth the transition, the session animates the rotation with requestAnimationFrame, using an animation duration of 500 milliseconds, “half a second which feels snappy but smooth,” easing the rotation across frames and updating entityTransform with a fresh DOMMatrix each frame.¹ The honest trade-off, in Apple’s own words: custom transforms “give you full control, but they require extra work: bounding boxes, clipping, manual animation code.”¹ Reach for scripted transforms when you need them, and lean on stagemode="orbit" when you do not.

Play baked animation, then go to AR

Models can also carry their own motion. Animations “are typically authored in 3D tools like Blender or Maya and baked into the USDZ file,” and the element “plays the first animation track.”¹ Two lines of JavaScript control playback: set playbackRate on the model, then call its play() method. A positive value plays forward, a negative value reverses it, and the session uses 5 and -5 for faster playback:

function play(rate) {
  model.playbackRate = rate;   // positive plays forward, negative reverses
  model.play();
}

play(5);    // fast forward
play(-5);   // fast reverse

The last step takes the product off the screen and into the room. “Wrap the model in an <a> tag with rel="ar" attribute, point to the same resource, and on iOS and iPadOS, your customers get a full AR Quick Look experience.”¹

<a rel="ar" href="mallet.usdz">
  <model src="mallet.usdz">
    <img src="mallet.jpg" alt="Camping mallet">
  </model>
</a>

On visionOS, the element already made 3D “feel like a natural part of the web,” with stereoscopic rendering that lets customers “pull the product out of the page and examine it as if it were right in their hands,” and it powers immersive website environments that place a visitor inside a scene from Safari.¹

Ship it smaller

Local files look great; the same files over the internet load slowly. The session runs a command-line tool, usdcrush, on the model: “with no change in quality, the file goes from 7.9 MB down to 1.9 MB,” and the two versions open side by side in Safari look identical.¹ A companion tool, usdrecord, generates a thumbnail or fallback image directly from a 3D file when you do not have one yet, with options like output format or rendering from a custom camera in the file.¹ Both tools “are already installed on your Mac” as part of a larger USD suite, and the session notes you can script usdrecord across an entire catalog.¹ For the format itself, the Alliance for OpenUSD publishes the full USDZ specification as “a clear, vendor-neutral reference” along with conversion tools.¹

Key Takeaways

For web developers: - Add <model> today with an <img> fallback nested inside, so non-supporting browsers degrade to a static image and supporting Safari upgrades to interactive 3D automatically.¹ - Gate display on the ready promise and handle failures in catch, because a multi-megabyte USDZ takes real time to load.¹

For 3D artists: - Bake your first animation track into the USDZ in Blender or Maya; the element plays it and exposes playbackRate plus play() for forward and reverse control.¹ - Run usdcrush before shipping to cut file size with no visible quality loss, and usdrecord to generate the <img> fallback from the model itself.¹

For product and commerce teams: - Use stagemode="orbit" for one-attribute interactive rotation, and reserve scripted entityTransform for cases that need exact angles or custom UI.¹ - Wrap the model in <a rel="ar"> so iOS and iPadOS shoppers can place the product in their own space through AR Quick Look.¹

FAQ

Is the HTML <model> element brand new in 2026?

No. Apple shipped the <model> element on visionOS first. WWDC 2026 expands it to iOS, iPadOS, and macOS Safari with the same markup, and matures the JavaScript API around it (the ready promise, entityTransform, baked-animation playback, and <a rel="ar">).¹

How do I add a fallback for browsers without <model> support?

Nest an <img> tag inside the <model> tag. Older Safari versions and browsers that do not yet support the element render the image instead, so visitors still see the product. A polyfill is available too, though some features such as visionOS stereoscopic display cannot be polyfilled.¹

What file format does the <model> element use?

USDZ, Universal Scene Description zipped into a single file that packages geometry, materials, textures, and animations. Safari supports other formats, but Apple recommends USDZ for the best experience, and the Alliance for OpenUSD publishes the full specification.¹

How do I make a model interactive?

Set stagemode="orbit" for free side-to-side rotation with one attribute. For exact angles, set stagemode="none", build a DOMMatrix with rotateSelf, and assign it to the model’s entityTransform property, animating across frames with requestAnimationFrame if you want a smooth transition.¹

How do I take a web model into augmented reality?

Wrap the <model> in an <a> tag with the rel="ar" attribute pointing to the same USDZ resource. On iOS and iPadOS, that gives visitors a full AR Quick Look experience so they can place the product in their environment.¹

The <model> element rides on the same USD foundation Apple is pushing across its platforms: see Apple’s new Swift-native USD framework, USDKit, and the spatial context in what’s new in visionOS 27. The case for a tag over a library fits the broader argument in the no-build manifesto and HTML is the format agents want. The full series hub is the Apple Ecosystem Series.

References