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

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

npm install react-image-annotate

import React from "react";
import ReactImageAnnotate from "react-image-annotate";

const App = () => (
  <ReactImageAnnotate
    labelImages
    regionClsList={["Alpha", "Beta", "Charlie", "Delta"]}
    regionTagList={["tag1", "tag2", "tag3"]}
    images={[
      {
        src: "https://placekitten.com/408/287",
        name: "Image 1",
        regions: []
      }
    ]}
  />
);

export default App;

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...

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.

See more details in the contributing guidelines.

Consult these icon repositories:

• Material Icons
• Font Awesome Icons