Annotorious: Image Annotation Made Simple

Welcome to Annotorious, a versatile and lightweight library for adding image annotation capability to any web page.

Annotorious at a Glance

Annotorious supports both regular images and the OpenSeadragon viewer for zoomable images and IIIF.

• The main @annotorious/annotorious package provides a straightforward solution for standard images.
• The @annotorious/openseadragon contains everything you need for annotating OpenSeadragon images.
• The @annotorious/react package includes React bindings for both versions.

Quick Start: Standard Images

npm install --save @annotorious/annotorious

import { createImageAnnotator } from '@annotorious/annotorious';

// Import essential CSS styles
import '@annotorious/annotorious/annotorious.css';

// Image element ID or DOM element
const anno = createImageAnnotator('sample-image');

Read the full guide for using Annotorious with standard images or see the API docs for the ImageAnnotator.

Quick Start: OpenSeadragon

npm install --save @annotorious/openseadragon

import { createOSDAnnotator } from '@annotorious/openseadragon';

// Import essential CSS styles
import '@annotorious/annotorious/annotorious-openseadragon.css';

window.onload = function() {
  var viewer = OpenSeadragon({
    id: 'openseadragon',
    tileSources: {
      type: 'image',
      url:  '/my-image.jpg'
    }
  });

  var anno = createOSDAnnotator(viewer);
}

Read the full Annotorious OpenSeadragon guide or see the API docs for the OpenSeadragonAnnotator.

Quick Start: React

npm install --save @annotorious/react

import { Annotorious, ImageAnnotator } from '@annotorious/react';

import '@annotorious/react/annotorious-react.css';

export default function App() {
  return (
    <Annotorious>
      <ImageAnnotator>
        <img src="example.jpg" />
      </ImageAnnotator>
    </Annotorious>
  );
}

Annotorious provides hooks for interacting with the anno ImageAnnotator instance and other API functions.

const anno = useAnnotator();

Read the full guides for using Annotorious React for images or with OpenSeadragon).