Embedding the viewer

Viewer Component API

The Rotavue Viewer ships in two forms, both generated by the export step:

Standalone export — a self-contained folder (index.html + tile pyramid + viewer.js) that works on any static host.
<rotavue-viewer> web component — an embeddable custom element for pages and CMSs. Every exported folder now includes viewer-component.js and manifest.json.

Installation

Point a module script at the exported folder’s component file:

<script type="module" src="https://cdn.example.com/projects/my-shoe/viewer-component.js"></script>

Basic Usage

<rotavue-viewer src="https://cdn.example.com/projects/my-shoe"></rotavue-viewer>

The src attribute points to the exported project folder.

Attributes

Attribute	Type	Default	Description
`src`	`string`	-	Required. URL to the exported project folder.
`auto-rotate`	`boolean`	`false`	Enable automatic rotation on load.
`rotation-speed`	`number`	`30`	Auto-rotation speed in degrees per second.

zoom and inertia are planned attributes; wheel/pinch zoom is currently always enabled and the motion smoothing is fixed.

Methods

You can call methods on the DOM element:

const viewer = document.querySelector('rotavue-viewer');

// Play/Pause
viewer.play();
viewer.pause();

// Navigation
viewer.setFrame(10);
viewer.reset();

// State
const currentFrame = viewer.getCurrentFrame(); // { frame, row }

Events

Event	Description
`load`	Fired when the manifest and initial images are loaded.
`framechange`	Fired when the displayed frame changes (`detail.frame`, `detail.row`).
`zoomchange`	Fired when the zoom level changes (`detail.zoom`).
`error`	Fired if assets fail to load.

viewer.addEventListener('framechange', (e) => {
  console.log('Current frame:', e.detail.frame);
});

CSS Parts

Style internal elements using the ::part() pseudo-element:

::part(canvas): The 2D canvas.
::part(loader): The loading overlay (also used for error states).