# @elfsquad/forge-viewer

> The Elfsquad Forge Viewer allows you to embed a [Autodesk Forge viewer](https://forge.autodesk.com/) into your own custom build configurator implementation.

Latest version **1.5.2** (published 2026-08-25) · MIT license · 0 weekly downloads

## Install

```sh
npm install @elfsquad/forge-viewer
pnpm add @elfsquad/forge-viewer
yarn add @elfsquad/forge-viewer
bun add @elfsquad/forge-viewer
```

## Health

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

Positive: has types; no vulnerabilities; has provenance; recently updated; high maintenance score; high quality score.

Warnings: low downloads; no esm support.

## Facts

| | |
|---|---|
| Version | 1.5.2 |
| Published | 2026-08-25 |
| First published | 2022-05-06 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 86.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 1 |
| Author | Elfsquad |
| Maintainers | johannesheesterman, yasinatelfsquad |

## Links

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

## Dependencies (1)

- [@elfsquad/configurator](https://npm.io/package/@elfsquad/configurator.md) ^3.6.12

## Recent versions

- 1.5.2 (latest) — 2026-08-25
- 1.5.1 — 2026-08-25
- 1.4.0 — 2026-04-27
- 1.3.3 — 2026-04-07
- 1.3.2 — 2026-03-31
- 1.3.1 — 2026-03-26
- 1.3.0 — 2026-03-13
- 1.2.1 — 2026-02-10
- 1.2.0 — 2026-02-10
- 1.1.16 — 2024-05-15
- 1.1.15 — 2024-05-15
- 1.1.14 — 2024-05-15
- 1.1.12 — 2023-06-23
- 1.1.11 — 2023-05-31
- 1.1.10 — 2023-05-09
- … 10 more at https://npm.io/package/@elfsquad/forge-viewer/versions

## README

# Elfsquad Forge Viewer
The Elfsquad Forge Viewer allows you to embed a [Autodesk Forge viewer](https://forge.autodesk.com/) into your own custom build configurator implementation.

## Documentation

For more detailed documentation see https://elfsquad.github.io/forge-viewer/classes/ElfsquadForgeViewer.html

## Example
```javascript
import { Configuration, ConfiguratorContext } from "@elfsquad/configurator";
import { ElfsquadForgeViewer } from "@elfsquad/forge-viewer";

// Initialize a instance of the configurator context that can
// be used to interact with the Elfsquad Configurator API.
const configuratorContext = new ConfiguratorContext({
    tenantId: '<TENANT_ID>'
});

// ElfsquadForgeViewer is a HTML element that will display the  
// 3D viewer.
const forgeViewer = new ElfsquadForgeViewer();
// Hide the viewer while loading.
forgeViewer.style.visibility = 'hidden';
// Append the viewer to the body of the page.
document.body.appendChild(forgeViewer);

// Start a new configuration session
configuratorContext.newConfiguration('Model name').then(async (configuration) => {
    // Retrieve a 3d layout from the Elfsquad API and apply it to
    // the 3D viewer.
    configuratorContext.getLayout3d().then(async (layout3d) => {
        await forgeViewer.initialize(layout3d);
        // At this point the viewer has been initialized and we
        // make the 3D viewer visible for the user.
        forgeViewer.style.visibility = 'visible';
    });    

    // Subscribe to configurator update events and re-apply the
    // 3D layout settings to the viewer.
    configuratorContext.onUpdate(async (c) => {
        configuratorContext.getLayout3d().then(async (layout3d) => {
            await forgeViewer.update(layout3d);
        });
    });

});
```

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