Open-Source Pathology Annotation Toolkit

Open Annotation for Whole-Slide Workflows

Annota is a community-driven toolkit for building precise, high-performance annotation workflows with React or Svelte.

Get Started Open Playground

60 FPS

Interactive Rendering

5 Core Tools

Annotation Modes

React + Svelte

Framework Support

WSI Ready

Pathology Scale

Built in the Open for Real Annotation Work

The project focuses on practical workflows, maintainable APIs, and transparent design decisions that contributors can reason about and extend.

Slide-Scale Performance

Pan, zoom, and annotate large whole-slide imagery with predictable interaction and high rendering throughput.

Operational Layer Controls

Organize work into independent layers with lock state, visibility, opacity control, and export-level separation.

Production Toolchain

Move fluidly across point, polygon, rectangle, curve, split, and SAM-assisted segmentation in one workspace.

Integration Surface

Use annotation lifecycle events and structured exports to plug into QA, analytics, and downstream automation.

Framework Parity

Build against aligned APIs in React and Svelte with equivalent concepts, examples, and runtime behavior.

Pathology-Focused Defaults

Designed around real pathology constraints instead of generic drawing demos or one-off proof-of-concepts.

From Slide Ingestion to Structured Output

Step 1

Ingest and Navigate

Load high-resolution imagery and maintain stable viewport control for clinical annotation sessions.

Step 2

Annotate with Precision

Switch tools instantly while preserving context, layer boundaries, and editing consistency.

Step 3

Export and Automate

Deliver structured outputs and event signals directly into your review and model pipelines.

Quick Start

Start quickly in either framework with the same core concepts and predictable tool integration model.

example.tsx

import { AnnotaProvider, AnnotaViewer, Annotator, useTool } from 'annota';
import { RectangleTool } from 'annota';
import { useState } from 'react';

function App() {
  const [viewer, setViewer] = useState(null);
  const rectangleTool = new RectangleTool();

  useTool({
    viewer,
    handler: rectangleTool,
    enabled: !!viewer,
  });

  return (
    <AnnotaProvider>
      <AnnotaViewer
        options={{ tileSources: '/image.dzi' }}
        onViewerReady={setViewer}
      />
      <Annotator viewer={viewer} />
    </AnnotaProvider>
  );
}

example.svelte

<script lang="ts">
  import { AnnotaProvider, Viewer, Annotator, tool } from 'annota/svelte';
  import { RectangleTool } from 'annota';
  import type OpenSeadragon from 'openseadragon';

  let viewer: OpenSeadragon.Viewer | undefined = $state(undefined);
  const rectangleTool = new RectangleTool();

  tool({
    viewer: () => viewer,
    handler: () => rectangleTool,
    enabled: () => !!viewer,
  });
</script>

<AnnotaProvider>
  <Viewer
    options={{ tileSources: '/image.dzi' }}
    onViewerReady={(v) => (viewer = v)}
  />
  <Annotator {viewer} />
</AnnotaProvider>

Read the full guide