# Babylon.js Viewer (V1)

> The viewer is the simplest way to display 3D content on a web page.

Source: https://doc.babylonjs.com/legacy/babylonViewer

> [!WARNING]
> **Deprecated**
>
> The Babylon Viewer V1 is deprecated. When building new experiences, please use the [Babylon Viewer V2](https://doc.babylonjs.com/features/featuresDeepDive/babylonViewer).

## Display 3D models on your webpage

The Babylon.js viewer is the simplest way to display 3D content on a web page.

To display a 3D model on your web page:

1. Add a script reference to the viewer

    ```html
    <script src="https://cdn.babylonjs.com/viewer/babylon.viewer.js"></script>
    ```

2. Add a `<babylon>` tag and set the _model_ attribute to point to a `.gltf` or `.glb` file

    ```html
    <babylon model="model.gltf"></babylon>
    ```

    We recommend using the [glTF format](https://github.com/khronosgroup/gltf) (`.gltf` or `.glb`) for displaying 3D models on your webpage. Other formats supported by Babylon.js loaders are also supported by the viewer component, including `.babylon`, `.obj`, and `.stl`.

The Babylon.js viewer automatically provides a [default viewing experience](#default-viewing-experience) for 3D models. All aspects of this experience are configurable. See [Configuring the viewer](//doc.babylonjs.com/extensions/babylonViewer/configuringViewer) for more information on customizing the viewing experience.

## Example

[CodePen: Babylon.js Viewer - Display a 3D model](https://codepen.io/BabylonJS/pen/QxzBPd/)

## Resizing

Controlling the size of the viewer is one of the most common configuration operations. It is fairly easy, as the viewer in default mode fills 100% of the width and height of its container. To control the viewer, you can simply style its enclosing container.

[CodePen: Babylon.js Viewer - Resize the viewer](https://codepen.io/BabylonJS/pen/qMBwar/)

## Using the viewer in your project

The Babylon.js viewer is available on a CDN as well as an NPM package. The Babylon.js viewer is a wrapper around the Babylon.js engine and follows the same versioning scheme as the engine. The current stable version of the Babylon.js viewer uses the current stable version of the Babylon.js engine, and the preview version of the Babylon.js viewer uses the preview version of the Babylon.js engine.

## CDN

Stable versions of the viewer are available on:

-   https://cdn.babylonjs.com/viewer/babylon.viewer.js (minified)
-   https://cdn.babylonjs.com/viewer/babylon.viewer.max.js

Preview releases (nightlies) of the viewer are available on:

-   https://preview.babylonjs.com/viewer/babylon.viewer.js (minified)
-   https://preview.babylonjs.com/viewer/babylon.viewer.max.js

## NPM

To install the Babylon.js viewer through NPM, use:

```javascript
npm install --save babylonjs-viewer
```

This will install the latest stable version of the viewer, including its needed dependencies.

Afterward, it can be imported into the project using:

```javascript
import "babylonjs-viewer";
```

This will enable the `BabylonViewer` namespace.

## Further reading

- [Configuring the viewer](https://doc.babylonjs.com/legacy/babylonViewer/configuringViewer)
- [The templating system](https://doc.babylonjs.com/legacy/babylonViewer/viewerTemplatingSystem)
- [Recreating the default configuration for the viewer](https://doc.babylonjs.com/legacy/babylonViewer/defaultViewerConfig)
- [Advanced usage](https://doc.babylonjs.com/legacy/babylonViewer/advancedViewerUsage)
- [Babylon.js viewer examples](https://doc.babylonjs.com/legacy/babylonViewer/viewerExamples)

## Pages in this section

- [Configuring the Babylon.js Viewer](https://doc.babylonjs.com/legacy/babylonViewer/configuringViewer.md): How to configure the Babylon.js viewer.
- [Babylon.js Viewer Templating System](https://doc.babylonjs.com/legacy/babylonViewer/viewerTemplatingSystem.md): Using and extending the viewer's simple integrated templating system.
- [Modify the Babylon.js Viewer](https://doc.babylonjs.com/legacy/babylonViewer/defaultViewerConfig.md): Modifying the Babylon.js viewer using HTML.
- [Babylon.js Viewer - Advanced usage](https://doc.babylonjs.com/legacy/babylonViewer/advancedViewerUsage.md): Advanced uses of the viewer.
- [Babylon.js Viewer Examples](https://doc.babylonjs.com/legacy/babylonViewer/viewerExamples.md): Examples of using the viewer