<model-viewer>

Easily display interactive 3D models on the web & in AR

Quick Start

Min Zip Latest Release
follow on Twitter Github Discussions

Documentation

  1. API documentation & examples

Model Editor

  1. Use the Model Editor to prepare your GLB models for the web

  2. Interactive Viewer (Legacy)

Browser Support

<model-viewer> is supported on the last 2 major versions of all evergreen desktop and mobile browsers.

These browser features are only needed if you wish to use webxr in ar-modes:

Feature Chrome Canary Safari Firefox Edge Samsung Internet
WebXR Device API icon-check icon-check icon-na icon-na icon-check icon-check
WebXR HitTest API icon-check icon-check icon-na icon-na icon-check icon-check
WebXR DOM Overlay API icon-check icon-check icon-na icon-na icon-na icon-na
icon-check
Natively supported
icon-warning
Available with polyfill
icon-flag
Behind a flag, unstable
icon-na
Not available

:focus-visible is an as-yet unimplemented web platform feature that enables content authors to style a component on the condition that it received focus in such a way that suggests the focus state should be visibly evident.

The :focus-visible capability has not been implemented in any stable browsers yet. If the polyfill is available on the page, <model-viewer> will use it and only display focus rings when :focus-visible should apply.

Check out this related MDN article for more details on :focus-visible.