Skip to content
Annotorious

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 standard version of Annotorious.

npm install @annotorious/annotorious

To annotate zoomable images in OpenSeadragon, install the OpenSeadragon plugin version of Annotorious.

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 React bindings package. Note that the 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 bindings package. Note that the package includes bindings for the standard version of Annotorious as well as the OpenSeadragon plugin.

npm install  @annotorious/svelte

Using Annotorious

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