Installation

You can install Annotorious with a package manager like npm, or import it into your HTML page using a <script> tag.

Vanilla JavaScript

To annotate JPEG or PNG images using plain JavaScript, install the Annotorious standard package.

npm install @annotorious/annotorious

To annotate zoomable images in OpenSeadragon, install the OpenSeadragon package.

npm install openseadragon @annotorious/openseadragon

Script Import

To use the standard version of Annotorious without a bundler, import the script and the stylesheet file into the <head> of your HTML page.

<head>
  <link
    rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/@annotorious/annotorious@latest/dist/annotorious.css">
  <script
    src="https://cdn.jsdelivr.net/npm/@annotorious/annotorious@latest/dist/annotorious.js"></script>
</head>

To use the OpenSeadragon version without a bundler:

<head>
  <link
    rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/@annotorious/openseadragon@latest/dist/annotorious-openseadragon.css">
  <script
    src="https://cdn.jsdelivr.net/npm/@annotorious/openseadragon@latest/dist/annotorious-openseadragon.js"></script>
</head>

React

To use Annotorious with React, install the Annotorious React package. Note that this package includes bindings for the standard version of Annotorious as well as OpenSeadragon.

npm install  @annotorious/react

Svelte

To use Annotorious with Svelte, install the Svelte package. Note that the package includes bindings for the standard version of Annotorious as well as OpenSeadragon.

npm install  @annotorious/svelte

Using Annotorious

To learn more about how to use Annotorious with the framework of your choice, see the following guides: