OSD or Static Image Viewer plugin


stars 🌟issues ⚠️updated 🛠created 🐣size 🏋️‍♀️
Minified + gzip package size for @annotation-studio/plugin-viewer in KB


Annotation Studio - Viewer plugin

This is the Open Seadragon or static image viewer component.


To use the plugin you need to add it as a dependency along with the core plugin:

$ npm i @annotation-studio/plugin-viewer @annotation-studio/plugin-core --save-dev

Then in your code (ES6 in this example)

import CorePlugin from '@annotation-studio/plugin-core';
import ViewerPlugin from '@annotation-studio/plugin-viewer';

// We need the core plugin.
const core = CorePlugin(
    resourceTemplates: '...',
    manifest: '...',
    canvas: '...',
    elucidateServer: '...',

// We need to wait for the store to be available.
core.then(store => {
      viewer: 'OpenSeadragon', // or StaticImageViewer
      // Actual size, will get re-sized.
      height: 6400,
      width: 4800,
  return store;

Your HTML should also have a fallback image:

<div id="viewer">
    <img src="..." height="480" width="640"/>

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.