Get unlimited public & private packages + package-based permissions with npm Pro.Get started »


1.1.5 • Public • Published


A react based video & image annotating tool. See demo.

NPM Version License: MIT

Quick Start


Use npm to install the tool into your react project.

npm i react-annotation-tool --save


Two tools are available now. They are Image Annotation Tool (aka TwoDimensionalImage) and Video Annotation Tool (aka TwoDimensionalVideo) respectively. Import either one into your react component.

import {TwoDimensionalImage, TwoDimensionalVideo} from "react-annotation-tool"

Image Annotation Tool

This tool allows to annotate images with polygons. Users could create new taxonomy if they feel the annotation does not fit into any default options. It is adopted by a CVPR 2019 paper, VizWiz-Priv: A Dataset for Recognizing the Presence and Purpose of Private Visual Information in Images Taken by Blind People.

Data Formats

Name Description
Annotation The basic unit of the annotation result
Vertex Each annotation contains mutiple vertices


Prop Description Format Default
className String ''
url Image url String ''
imageWidth Image width Number 400
defaultAnnotations Default annotations. Detail [Object] []
options A set of options for classifying annotations. Detail Object {}
isDynamicOptionsEnable Enable users to add/delete options Boolean false
disabledOptionLevels The levels which can't be selected. Start from "1". Detail [String] []
isLabelOn Show labels of annotaions on the image Boolean false
isViewOnlyMode View only Boolean false
emptyAnnotationReminderText Text for warming empty annotaion on the control panel String ''
hasPreviousButton Enable Previous button Boolean false
onPreviousClick Called when Previous button is clicked Function ()=>{}
hasNextButton Enable Next button Boolean false
onNextClick Called when Next button is clicked Function ()=>{}
hasSkipButton Enable Skip button Boolean false
onSkipClick Called when Skip button is clicked Function ()=>{}


  { id: "jlvnw6az", name: "jlvnw6az", color: "rgba(227,0,255,1)", isClosed: true,
    vertices: [ 
      { id: "jlvnw6az", name: "jlvnw6az", x: 189.5625, y: 201 },
      { id: "jlvnw8qs", name: "jlvnw8qs", x: 309.25, y: 200 },
      { id: "jlvnw9vp", name: "jlvnw9vp", x: 313.25, y: 203 },
      { id: "jlvnwbvk", name: "jlvnwbvk", x: 316.25, y: 288 },
      { id: "jlvnwczb", name: "jlvnwczb", x: 310.25, y: 292 },
      { id: "jlvnwfhm", name: "jlvnwfhm", x: 187.25, y: 294 },
      { id: "jlvnwgoe", name: "jlvnwgoe", x: 181.25, y: 290 },
      { id: "jlvnwidd", name: "jlvnwidd", x: 183.25, y: 205 },
    selectedOptions: [ 
      { id: "0", value: "root" }, 
      { id: "1", value: "Electronic" }, 
      { id: "1-1", value: "Laptop" }, 
      { id: "1-1-1", value: "Apple" } 
  { id: "jlvnxa79", name: "jlvnxa79", color: "rgba(0,255,81,1)", isClosed: true,
    vertices: [ 
      { id: "jlvnxa79", name: "jlvnxa79", x: 369.25, y: 350.5 },
      { id: "jlvnxbct", name: "jlvnxbct", x: 372.25, y: 343.5 },
      { id: "jlvnxcg6", name: "jlvnxcg6", x: 387.25, y: 341 },
      { id: "jlvnxdic", name: "jlvnxdic", x: 393.25, y: 343 },
      { id: "jlvnxfp2", name: "jlvnxfp2", x: 424.25, y: 342 },
      { id: "jlvnxgfx", name: "jlvnxgfx", x: 426.25, y: 347 },
      { id: "jlvnxjd8", name: "jlvnxjd8", x: 381.25, y: 350 },
    selectedOptions: [ 
      { id: "0", value: "root" }, 
      { id: "2", value: "Stationery" }, 
      { id: "2-1", value: "Pen" } 


Nested array of object. Each object has id, value and children properties. Must start from object with value: "root". e.g.,

{id: "0", value: "root", children: [
   {id: "1", value: "Electronic", children: [
      {id: "1-1", value: "Laptop", children: [
         {id: "1-1-1", value: "Apple", children: []},         
         {id: "1-1-2", value: "Asus", children: []}  
      {id: "1-2", value: "Charger", children: []},
      {id: "1-3", value: "Watch", children: []}
   {id: "2", value: "Stationery", children: [
      {id: "2-1", value: "Pen", children: []},
      {id: "2-2", value: "Eraser", children: []}


Array of Integer. Start from "1". e.g.,

[1, 2]


  • Refactorize all components.

Video Annotation Tool

Vidoe tool allows you to annotate object in videos via bounding box. The tool originally is designed for annotating cell videos.

Data Formats

Name Description
Annotation The basic unit of the annotation result
Incident Each annotation contains mutiple incidents. Each incident records the time and some information (e.g., position, size, status...) when the annotation is manipulate by the users (e.g., split, move, resize...)
Parent(parentName) If you enable Split functionality, this property stores the parent who generates current annotation
Children(childrenNames) If you enable Split functionality, this property store the children belong to current annotation


Prop Description Data Type Default
className String ''
url Video url String ''
defaultAnnotations Default annotations. Detail [Objects] []
videoWidth Video width Number 400
isDefaultAnnotationsManipulatable Allow users to edit default annotations Boolean false
previewHeader Header for preview String ''
previewNoticeList Content for preview [String] []
isEmptyCheckEnable Force users to annotate at least one object Boolean false
isSplitEnable Enable Split button for each annotation Boolean false
isShowHideEnable Enable Show/Hide button for each annotation Boolean false
hasReview Enable review after users click submit button Boolean false
numAnnotationsToBeAdded Number of annotations users can be added Number 1000
onSubmit The callback function to handle submitted result Function ()=>{}
emptyCheckSubmissionWarningText Text for warming empty annotaion String ''
emptyCheckAnnotationItemWarningText Text for warming non-incident anntation String ''
emptyAnnotationReminderText Text for warming empty annotaion on the control panel String ''


  id: "jwzlwirv",
  name: "jwzlwirv",
  label: "1",
  color: "rgba(255,219,0,1)",
  parentName: "",
  childrenNames: ["jwzlwrh3","jwzlwrh4"],
   {x:198.25, y:137, width:101, height:99, time:0, status:"Show", id:"jwzlwirv", name:"jwzlwirv", label:""},   
   {x:235.25, y:190, width:73, height:68, time:0.07694, status:"Show", id:"jwzlwlzl", name:"jwzlwlzl", label:""},
   {x:235.25, y:190, width:73, height:68, time:0.11864, status:"Split", id:"jwzlwrh2", name:"jwzlwrh2", label:""}
   id: "jwzlwrh3",
   name: "jwzlwrh3",
   label: "1-1",
   color: "rgba(0,255,81,1)",
   parentName: "jwzlwirv",
   childrenNames: [],
   incidents: [
    {x:235.25, y:190, width:36.5, height:34, time:0.11864, status:"Show", id:"jwzlwrh2", name:"jwzlwrh2", label:""}, 
    {x:202.25, y:267, width:64.5, height:83, time:0.17467, status:"Show", id:"jwzlwy9h", name:"jwzlwy9h", label:""}
   id: "jwzlwrh4",
   name: "jwzlwrh4",
   label: "1-2",
   color: "rgba(0,255,81,1)",
   parentName: "jwzlwirv",
   childrenNames: [],
   incidents: [
    {x:251.75, y:204, width:36.5, height:34, time:0.11864, status:"Show", id:"jwzlwrh2", name:"jwzlwrh2", label:""}, 
    {x:298.75, y:242, width:51.5, height:54, time:0.17467, status:"Show", id:"jwzlwwpj", name:"jwzlwwpj", label:""}


  • Makes Split and Hide optional.
  • Enable other shapes (e.g., circle) to annotate.

Want to talk with me?

I am seeking for any sort of entrepreneurship and crowsourcing research opportunity. Please contact me.


npm i react-annotation-tool

DownloadsWeekly Downloads






Unpacked Size

8.84 MB

Total Files


Last publish


  • avatar