Skip to content

Getting Started

Welcome to Annota! This guide will help you integrate Annota into your application and start annotating medical images.

Choose Your Framework

Section titled “Choose Your Framework”

Annota supports both React and Svelte. Select your preferred framework to see framework-specific getting started guides.

Section titled “React Quick Links”
React Installation Install Annota for React
React Quick Start Build your first React annotation viewer
React Hooks Learn about React hooks API

Shared Getting Started Content

Section titled “Shared Getting Started Content”

These concepts apply to both React and Svelte:

Core Concepts Understand annotations, layers, and tools
Installation Install Annota and dependencies
Architecture Learn about Annota's architecture

Prerequisites

Section titled “Prerequisites”

Before you begin, make sure you have:

  • Node.js 16+ installed
  • React 18+ / 19+ OR Svelte 5 in your project
  • Basic knowledge of your chosen framework
  • A whole slide image in a supported format (DZI, IIIF, etc.)

What is Annota?

Section titled “What is Annota?”

Annota is a high-performance annotation framework specifically designed for digital pathology and whole slide imaging. It provides:

  • Interactive drawing tools for creating annotations (points, rectangles, polygons)
  • Layer management for organizing annotations
  • Event system for responding to annotation changes
  • Data loaders for importing annotations from H5, JSON, and other formats
  • High performance rendering with PixiJS and WebGL
  • Framework support for both React and Svelte

Architecture Overview

Section titled “Architecture Overview”

Annota is built on three core technologies:

  • OpenSeadragon: For displaying gigapixel images
  • PixiJS: For hardware-accelerated annotation rendering
  • React/Svelte: For component-based UI integration

The framework follows a clean separation of concerns:

Your React/Svelte App
    ↓
Provider (Context/Runes)
    ↓
Viewer (OpenSeadragon)
    ↓
Annotator (Annotation Layer)
    ↓
Tools (Point, Rectangle, Polygon, etc.)

Typical Workflow

Section titled “Typical Workflow”
  1. Install Annota and OpenSeadragon
  2. Wrap your app with AnnotaProvider
  3. Add Viewer component to display your image
  4. Initialize the Annotator overlay
  5. Use tools via hooks (React) or stores (Svelte)
  6. Access annotations reactively

Next Steps

Section titled “Next Steps”