API Reference

Complete API documentation for Annota, supporting both React and Svelte.

Framework Selection

Choose your framework to view framework-specific APIs:

React
Svelte

React API

React Hooks

Hooks for accessing annotations, selection, and tools. View Hooks →

React Components

React components for building annotation UIs. View Components →

Shared APIs

These APIs are identical for both React and Svelte:

Annotator Instance

Programmatic API for annotation management. View Annotator →

TypeScript Types

Complete type definitions (shared). View Types →

Tools

Built-in annotation tools (PointTool, RectangleTool, etc.). View Tools →

Data Loaders

Load H5, PGM, JSON files (shared). View Loaders →

Core Types

These types are shared between React and Svelte.

Annotation

interface Annotation {
  id: string;
  shape: Shape;
  properties?: Record<string, unknown>;
  style?: AnnotationStyle;
}

Shape

type Shape =
  | PointShape
  | RectangleShape
  | PolygonShape
  | MultiPolygonShape
  | CircleShape
  | LineShape
  | FreehandShape
  | PathShape
  | ImageShape;

PointShape:

interface PointShape {
  type: "point";
  point: { x: number; y: number };
  bounds: Bounds;
}

RectangleShape:

interface RectangleShape {
  type: "rectangle";
  x: number;
  y: number;
  width: number;
  height: number;
  bounds: Bounds;
}

PolygonShape:

interface PolygonShape {
  type: "polygon";
  points: Array<{ x: number; y: number }>;
  closed: boolean;
  bounds: Bounds;
}

AnnotationStyle

interface AnnotationStyle {
  fill?: string;
  fillOpacity?: number;
  stroke?: string;
  strokeWidth?: number;
  strokeOpacity?: number;
}

Layer

interface Layer {
  id: string;
  name: string;
  visible: boolean;
  opacity?: number;
  locked?: boolean;
  filter?: Filter;
  style?: AnnotationStyle;
}

Built-in Tools

Annota includes several annotation tools (shared between frameworks):

React
Svelte

import { PointTool, RectangleTool, PolygonTool } from "annota";

const pointTool = new PointTool();
const rectangleTool = new RectangleTool();
const polygonTool = new PolygonTool();

import { PointTool, RectangleTool, PolygonTool } from "annota";

const pointTool = new PointTool();
const rectangleTool = new RectangleTool();
const polygonTool = new PolygonTool();

See the Tools Guide for detailed usage.

Data Loaders

import { loadH5Masks, loadH5Coordinates } from "annota";

import { loadH5Masks, loadH5Coordinates } from "annota";

JSON

React
Svelte

import { loadJSONFile, exportJSON } from "annota";

import { loadJSONFile, exportJSON } from "annota";

See the Loaders Guide for more details.

Quick Reference

React Hooks

Hook	Purpose
`useAnnotator()`	Access annotator instance
`useAnnotations()`	Get all annotations
`useSelection()`	Get selected annotations
`useTool()`	Activate annotation tool
`useLayers()`	Get all layers
`useLayerManager()`	Manage layers

Svelte Stores

Store	Purpose
`getAnnotator()`	Access annotator instance
`annotations()`	Get all annotations
`selection()`	Get selected annotations
`tool()`	Activate annotation tool
`layers()`	Get all layers
`layerManager()`	Manage layers

Shared Components

Component	React	Svelte
Provider	`AnnotaProvider`	`AnnotaProvider`
Viewer	`AnnotaViewer`	`Viewer`
Annotator	`Annotator`	`Annotator`
Popup	`AnnotationPopup`	`Popup`
Context Menu	`ContextMenu`	`ContextMenu`

API Reference

Framework Selection

React API

Svelte API

Shared APIs

Core Types

Annotation

Shape

AnnotationStyle

Layer

Built-in Tools

Data Loaders

H5 Files

JSON

Quick Reference

React Hooks

Svelte Stores

Shared Components