# @google/model-viewer

> Easily display interactive 3D models on the web and in AR!

Latest version **4.3.1** (published 2026-06-04) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install @google/model-viewer
pnpm add @google/model-viewer
yarn add @google/model-viewer
bun add @google/model-viewer
```

## Health

**Score 65/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; high maintenance score; high quality score.

Warnings: low downloads; large bundle.

## Facts

| | |
|---|---|
| Version | 4.3.1 |
| Published | 2026-06-04 |
| First published | 2018-11-11 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=6.0.0 |
| Dependencies | 2 |
| Unpacked size | 41.1 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 8232 |
| Maintainers | smalls, jsantell, cdata, google-wombot |
| Keywords | ar, gltf, glb, webar, webvr, webxr, arcore, arkit, webaronarcore, webaronarkit, augmented reality, model-viewer, 3d |

## Links

- npm: https://www.npmjs.com/package/@google/model-viewer
- Repository: https://github.com/google/model-viewer
- Homepage: https://github.com/google/model-viewer#readme
- Issues: https://github.com/google/model-viewer/issues
- npm.io page: https://npm.io/package/@google/model-viewer

## Dependencies (2)

- [lit](https://npm.io/package/lit.md) ^3.2.1
- [@monogrid/gainmap-js](https://npm.io/package/@monogrid/gainmap-js.md) ^3.1.0

## Alternatives

- [@mdxeditor/editor](https://npm.io/package/@mdxeditor/editor.md) — 962.4K weekly downloads
- [mmdb-lib](https://npm.io/package/mmdb-lib.md) — 680.9K weekly downloads
- [playcanvas](https://npm.io/package/playcanvas.md) — 36.2K weekly downloads
- [@glw907/cairn-cms](https://npm.io/package/@glw907/cairn-cms.md) — 967 weekly downloads
- [markdown-to-confluence](https://npm.io/package/markdown-to-confluence.md) — 103 weekly downloads

## Recent versions

- 4.3.1 (latest) — 2026-06-04
- 2.0.0-rc3 (canary) — 2022-09-07
- 4.3.0 — 2026-06-01
- 4.2.0 — 2026-03-11
- 4.1.0 — 2025-04-08
- 4.0.0 — 2024-10-23
- 3.5.0 — 2024-04-18
- 3.4.0 — 2024-01-17
- 3.3.0 — 2023-10-09
- 3.2.1 — 2023-08-01
- 3.2.0 — 2023-07-11
- 3.1.1 — 2023-04-25
- 3.1.0 — 2023-04-05
- 3.0.2 — 2023-02-21
- 3.0.1 — 2023-02-15
- … 56 more at https://npm.io/package/@google/model-viewer/versions

## README

# `<model-viewer>`

 [![Min Zip](https://badgen.net/bundlephobia/minzip/@google/model-viewer)](https://bundlephobia.com/result?p=@google/model-viewer)
 [![Latest Release](https://img.shields.io/github/v/release/google/model-viewer)](https://github.com/google/model-viewer/releases)
 [![NPM Package](https://img.shields.io/npm/v/@google/model-viewer)](https://www.npmjs.com/package/@google/model-viewer)

 [![follow on Twitter](https://img.shields.io/twitter/follow/modelviewer?style=social&logo=twitter)](https://twitter.com/intent/follow?screen_name=modelviewer)
 [![Github Discussions](https://img.shields.io/github/stars/google/model-viewer.svg?style=social&label=Star&maxAge=2592000)](https://github.com/google/model-viewer/discussions)

`<model-viewer>` is a web component that makes rendering interactive 3D
models - optionally in AR - easy to do, on as many browsers and devices as possible.
`<model-viewer>` strives to give you great defaults for rendering quality and
performance.

As new standards and APIs become available `<model-viewer>` will be improved
to take advantage of them. If possible, fallbacks and polyfills will be
supported to provide a seamless development experience.

[Demo](https://model-viewer.glitch.me) • [Documentation](https://modelviewer.dev/) • [Quality Comparisons](https://github.khronos.org/glTF-Render-Fidelity/comparison/) (courtesy of Khronos)


## Installing

### NPM

The `<model-viewer>` web component can be installed from [NPM](https://npmjs.org):

```sh
# install peer dependency ThreeJS
npm install three 
# install package
npm install @google/model-viewer
```

Finally, include the `<model-viewer>` script in your project.

```js
import '@google/model-viewer';
```

### CDN

It can also be used directly from various free CDNs such as [jsDelivr](https://www.jsdelivr.com/package/npm/@google/model-viewer) and Google's own [hosted libraries](https://developers.google.com/speed/libraries#model-viewer):

```html
<script type="module" src="https://ajax.googleapis.com/ajax/libs/model-viewer/{{MODELVIEWER_VERSION}}/model-viewer.min.js"></script>
```

For more detailed usage documentation and live examples, please visit our docs
at [modelviewer.dev](https://modelviewer.dev)!

### Important note about versions
Our goal for `<model-viewer>` is to be a consistent, stable part of your web
platform while continuing to deliver cutting-edge features. We’ll always try
to minimize breaking changes, and to keep the component backwards compatible.
See our [guide to contributing](../../CONTRIBUTING.md#Stability) for more
information on backwards compatibility.

For your production site you may want the extra stability that comes by
pinning to a specific version, and upgrading on your own schedule (after
testing).

If you’ve installed via [NPM](https://www.npmjs.com/package/@google/model-viewer), you’re all set - you’ll only
upgrade when you run [`npm update`](https://docs.npmjs.com/cli/update.html).
Note that three.js is a peer dependency, so that must also be installed, but can
be shared with other bundled code. Note that `<model-viewer>` requires the
version of three.js we test on to maintain quality, due to frequent upstream
breaking changes. We strongly recommend you keep your three.js version locked to
`<model-viewer>`'s. If you must use a different version, npm will give you an
error which you can work around using their `--legacy-peer-deps` option, which
will allow you to go outside of our version range. Please do not file issues if
you use this option. 

## Browser Support

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

|               | <img src="https://github.com/alrra/browser-logos/raw/master/src/chrome/chrome_32x32.png" width="16"> Chrome | <img src="https://github.com/alrra/browser-logos/raw/master/src/firefox/firefox_32x32.png" width="16"> Firefox | <img src="https://github.com/alrra/browser-logos/raw/master/src/safari/safari_32x32.png" width="16"> Safari | <img src="https://github.com/alrra/browser-logos/raw/master/src/edge/edge_32x32.png" width="16"> Edge |
| -------- | --- | --- | --- | --- |
| Desktop  | ✅  | ✅  | ✅  | ✅  |
| Mobile   | ✅  | ✅  | ✅  | ✅  |

`<model-viewer>` builds upon standard web platform APIs so that the performance,
capabilities and compatibility of the library get better as the web evolves.

## Development

To get started, follow the instructions in [the main README.md file](../../README.md).

The following commands are available when developing `<model-viewer>`:

Command                         | Description
------------------------------- | -----------
`npm run build`                 | Builds all `<model-viewer>` distributable files
`npm run build:dev`             | Builds a subset of distributable files (faster than `npm run build`)
`npm run test`                  | Run `<model-viewer>` unit tests
`npm run clean`                 | Deletes all build artifacts
`npm run dev`                   | Starts `tsc` and `rollup` in "watch" mode, causing artifacts to automatically rebuild upon incremental changes

---
_Source: https://npm.io/package/@google/model-viewer · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._