[![npm version](https://badge.fury.io/js/react-image-annotate.svg)](https://badge.fury.io/js/react-image-annotate)

polygons, hacktoberfest, bounding-boxes, image-annotations
npm install @eylonkoenig/react-image-annotate@1.8.0


React Image Annotate

npm version

The best image/video annotation tool ever. Check out the demo here.


wao.ai sponsorship image


  • Simple input/output format
  • Bounding Box, Point and Polygon Annotation
  • Zooming, Scaling, Panning
  • Multiple Images
  • Cursor Crosshair

Screenshot of Annotator


npm install react-image-annotate

import ReactImageAnnotate from "react-image-annotate"

const App = () => (
    taskDescription="# Draw region around each face\n\nInclude chin and hair."
    images={[{ src: "https://example.com/image1.png", name: "Image 1" }]}
    regionClsList={["Man Face", "Woman Face"]}

To get the proper fonts, make sure to import the Inter UI or Roboto font, the following line added to a css file should suffice.

@import url("https://rsms.me/inter/inter.css");


All of the following properties can be defined on the Annotator...

Prop Type (* = required) Description Default
taskDescription *string Markdown description for what to do in the image.
allowedArea { x: number, y: number, w: number, h: number } Area that is available for annotation. Entire image.
regionTagList Array<string> Allowed "tags" (mutually inclusive classifications) for regions.
regionClsList Array<string> Allowed "classes" (mutually exclusive classifications) for regions.
imageTagList Array<string> Allowed tags for entire image.
imageClsList Array<string> Allowed classes for entire image.
enabledTools Array<string> Tools allowed to be used. e.g. "select", "create-point", "create-box", "create-polygon" Everything.
showTags boolean Show tags and allow tags on regions. true
selectedImage string URL of initially selected image.
images Array<Image> Array of images to load into annotator
showPointDistances boolean Show distances between points. false
pointDistancePrecision number Precision on displayed points (e.g. 3 => 0.123)
onExit MainLayoutState => any Called when "Save" is called.



This project uses react-storybook. To begin developing run the following commands in the cloned repo.

  1. yarn install
  2. yarn storybook

A browser tab will automatically open with the project components.


Consult these icon repositories: