# Viewer.visualize

`Viewer.visualize` is JavaScript library for rendering CAD and BIM files in a browser using [VisualizeJS](https://cloud.opendesign.com/docs/index.html#/visualizejs).

Core capabilities:

- Rendering CAD/BIM files from [Open Cloud Server](https://cloud.opendesign.com/docs/index.html#/opencloud_server), web, or local files
- Interactive scene navigation (Orbit, Pan, Zoom, Walk, Fly modes)
- Model selection and highlighting
- Cutting planes and slicing
- Markups and measurements
- Viewpoint management

This library is a part of [CDE SDK](https://www.opendesign.com/products/cde) by [Open Design Alliance](https://opendesign.com).

## Installation

### CDN or static hosting

For CDN, you can use [unpkg](https://unpkg.com/) or [jsDelivr](https://www.jsdelivr.com/) (replace `25.3` with a version you need):

```html
<script src="https://unpkg.com/@inweb/viewer-visualize@25.3/dist/viewer-visualize.js"></script>
```

The global namespace for `Viewer.visualize` is `ODA.Visualize`.

```html
<script>
  const viewer = new ODA.Visualize.Viewer();
</script>
```

### Install via [npm](https://npmjs.org)

Open a terminal in your project folder and run:

```sh
npm install @inweb/viewer-visualize
```

The `Viewer.visualize` package will be downloaded and installed. Then you're ready to import it in your code:

```javascript
import { Viewer } from "@inweb/viewer-visualize";
const viewer = new Viewer();
```

## Example

Download and render file from the `Open Cloud Server`:

```html
<html>
  <body>
    <div>
      <canvas id="canvas" />
    </div>

    <script src="https://unpkg.com/@inweb/client@25.3/dist/client.js"></script>
    <script src="https://unpkg.com/@inweb/viewer-visualize@25.3/dist/viewer-visualize.js"></script>

    <script>
      const client = new ODA.Api.Client({ serverUrl: "https://cloud.opendesign.com/api" });
      const viewer = new ODA.Visualize.Viewer(client);

      init();

      async function init() {
        await client.signInWithEmail("email", "password");
        const files = await client.getFiles();
        await viewer.initialize(canvas);
        await viewer.open(files.result[0]);
        viewer.setActiveDragger("Orbit");
      }
    </script>
  </body>
</html>
```

To learn more, see [First application guide](https://cloud.opendesign.com/docs/index.html#/guide).

## Copyright and license

Code and documentation copyright 2002-2026 the [Open Design Alliance](https://opendesign.com). Code is distributed under a proprietary license, see [LICENSE](./LICENSE) for more information.
