Getting Started with the OpenSeadragon Plugin

The OpenSeadragon plugin is an extension to the OpenSeadragon viewer for zoomable high-resolution images. Click the annotation to edit. Hold SHIFT while clicking and dragging the mouse to create a new annotation.

Download the latest release and include it in your web page. Make sure to include the script after the OpenSeadragon script.

<script src="openseadragon/openseadragon.2.4.2.min.js"></script>
<script src="openseadragon-annotorious.min.js"></script>

Alternatively, grab the script from CDN.

<script src=""></script>

Create the viewer and initialize the Annotorious plugin.

  window.onload = function() {
    var viewer = OpenSeadragon({
      id: "openseadragon1",
      tileSources: {
        type: "image",
        url: "1280px-Hallstatt.jpg"

    // Initialize the Annotorious plugin
    var anno = OpenSeadragon.Annotorious(viewer);

    // Load annotations in W3C WebAnnotation format

The plugin takes a config object as optional second argument. See the API Reference for details.

var anno = OpenSeadragon.Annotorious(viewer, config);

Using NPM

If you use npm, npm install @recogito/annotorious-openseadragon and then

import OpenSeadragon from 'openseadragon';
import * as Annotorious from '@recogito/annotorious-openseadragon';

const viewer = OpenSeadragon({
  id: "openseadragon",
  tileSources: {
    type: "image",
    url: "1280px-Hallstatt.jpg"

const config = {}; // Optional plugin config options

Annotorious(viewer, config);