A New HTML Element for 3D Models?

The Safari Technology Preview 161 release notes carried a small but intriguing line: support for a new HTML element and attribute — <model src> and the <source type> attribute. It’s the kind of note that could be a proprietary experiment, an old idea finally landing, or something genuinely new. As it turns out, it’s a bit of all three.

Roots in AR Quick Look

The earliest context for <model> sits in WebKit’s explainers repo, with a README noting that the element has moved to the Immersive Web CG. The HistoryAndEvolution.md file there traces the concept back to improving Safari’s integration with iOS’s AR Quick Look — the feature that lets you place a 3D rendering of a product in your own space through your phone’s camera. The Met Museum has a notable case study of this in action.

In its simplest form, the idea is:

  • Drop a <model> element into the document.
  • Point it at an external file, like <model src="assets/example.usdz">.

The Original Proposal Comes from the Immersive Web CG

Apple’s notes link to the Immersive Web Community Group’s explainer — not a spec, but the original proposal. It argues that HTML handles many media types declaratively through elements like <img>, <picture>, and <video>, but 3D content remains awkward, requiring scripting on <canvas>. The proposal aims to put 3D models on the same footing as other media:

HTML allows the display of many media types through elements such as <img>, <picture>, or <video>, but it does not provide a declarative manner to directly display 3D content. Embedding 3D content within a page is comparatively cumbersome and relies on scripting the <canvas> element. We believe it is time to put 3D models on equal footing with other, already supported, media types.

Models are expected to come from 3D authoring tools or be generated dynamically, served as standalone resources. File types like .usdz or .glb are unfamiliar to many frontend developers, but the pattern mirrors familiar media elements closely:

<model style="width: 400px; height: 300px">
  <source src="assets/example.usdz" type="model/vnd.usdz+zip">
  <source src="assets/example.glb" type="model/gltf-binary">
</model>

A Draft Outline, But Not Yet Fleshed Out

The draft on immersive-web.github.io/model-element sketches the areas to cover: adding a model to a document, enabling interactivity, supporting multiple formats, providing fallback content, and making models accessible. Most of the document is open issues. Still, the proposed attributes make the element feel much like <video> — autoplay, controls, loop, muted, poster, and similar options are all under discussion.

Earlier Prototypes and a Possible Conflict

The idea predates these proposals. Keith Clark prototyped a custom <x-model> element back in 2018, describing it as a placeholder that exposes the DOM and CSSOM, with loading and rendering handled by three.js. Google followed with the <model-viewer> web component, which Joe Medley covered in 2020 on web.dev. There’s also a dedicated homepage for <model-viewer> with interactive demos.

Apple’s willingness to ship support in Safari Technology Preview fits its broader push into AR. Google’s stake appears to sit on the Web Components side with <model-viewer>. It’s easy to see where interests might diverge over how AR should work on the web.