diff --git a/py/examples/image_annotator.py b/py/examples/image_annotator.py
new file mode 100644
index 0000000000..a27d91afd4
--- /dev/null
+++ b/py/examples/image_annotator.py
@@ -0,0 +1,32 @@
+# Form / Image Annotator
+# Use when you need to annotate images.
+# #form #annotator #image
+# ---
+from h2o_wave import main, app, Q, ui
+
+
+@app('/demo')
+async def serve(q: Q):
+    if q.args.annotator is not None:
+        q.page['example'].items = [
+            ui.text(f'annotator={q.args.annotator}'),
+            ui.button(name='back', label='Back', primary=True),
+        ]
+    else:
+        q.page['example'] = ui.form_card(box='1 1 9 -1', items=[
+            ui.image_annotator(
+                name='annotator',
+                title='Drag to annotate',
+                image='https://images.pexels.com/photos/2696064/pexels-photo-2696064.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1',
+                image_height='700px',
+                tags=[
+                    ui.image_annotator_tag(name='p', label='Person', color='$cyan'),
+                    ui.image_annotator_tag(name='f', label='Food', color='$blue'),
+                ],
+                items=[
+                    ui.image_annotator_item(shape=ui.image_annotator_rect(x1=649, y1=393, x2=383, y2=25), tag='p'),
+                ],
+            ),
+            ui.button(name='submit', label='Submit', primary=True)
+        ])
+    await q.page.save()
diff --git a/py/examples/tour.conf b/py/examples/tour.conf
index ae976e0b62..17b0af710e 100644
--- a/py/examples/tour.conf
+++ b/py/examples/tour.conf
@@ -99,6 +99,7 @@ table_menu.py
 table_markdown.py
 tags.py
 image.py
+image_annotator.py
 file_stream.py
 frame.py
 frame_path.py
diff --git a/py/h2o_wave/types.py b/py/h2o_wave/types.py
index 3646ee9b6a..1d3b9ee6a9 100644
--- a/py/h2o_wave/types.py
+++ b/py/h2o_wave/types.py
@@ -6168,7 +6168,7 @@ def __init__(
         self.text = text
         """Text to be highlighted."""
         self.tag = tag
-        """Tag connected to the highlighted text."""
+        """The `name` of the text annotator tag to refer to for the `label` and `color` of this item."""
 
     def dump(self) -> Dict:
         """Returns the contents of this object as a dict."""
@@ -6275,6 +6275,273 @@ def load(__d: Dict) -> 'TextAnnotator':
         )
 
 
+class ImageAnnotatorTag:
+    """Create a unique tag type for use in an image annotator.
+    """
+    def __init__(
+            self,
+            name: str,
+            label: str,
+            color: str,
+    ):
+        _guard_scalar('ImageAnnotatorTag.name', name, (str,), True, False, False)
+        _guard_scalar('ImageAnnotatorTag.label', label, (str,), False, False, False)
+        _guard_scalar('ImageAnnotatorTag.color', color, (str,), False, False, False)
+        self.name = name
+        """An identifying name for this tag."""
+        self.label = label
+        """Text to be displayed for the annotation."""
+        self.color = color
+        """Hex or RGB color string to be used as the background color."""
+
+    def dump(self) -> Dict:
+        """Returns the contents of this object as a dict."""
+        _guard_scalar('ImageAnnotatorTag.name', self.name, (str,), True, False, False)
+        _guard_scalar('ImageAnnotatorTag.label', self.label, (str,), False, False, False)
+        _guard_scalar('ImageAnnotatorTag.color', self.color, (str,), False, False, False)
+        return _dump(
+            name=self.name,
+            label=self.label,
+            color=self.color,
+        )
+
+    @staticmethod
+    def load(__d: Dict) -> 'ImageAnnotatorTag':
+        """Creates an instance of this class using the contents of a dict."""
+        __d_name: Any = __d.get('name')
+        _guard_scalar('ImageAnnotatorTag.name', __d_name, (str,), True, False, False)
+        __d_label: Any = __d.get('label')
+        _guard_scalar('ImageAnnotatorTag.label', __d_label, (str,), False, False, False)
+        __d_color: Any = __d.get('color')
+        _guard_scalar('ImageAnnotatorTag.color', __d_color, (str,), False, False, False)
+        name: str = __d_name
+        label: str = __d_label
+        color: str = __d_color
+        return ImageAnnotatorTag(
+            name,
+            label,
+            color,
+        )
+
+
+class ImageAnnotatorRect:
+    """Create a rectangular annotation shape.
+    """
+    def __init__(
+            self,
+            x1: int,
+            y1: int,
+            x2: int,
+            y2: int,
+    ):
+        _guard_scalar('ImageAnnotatorRect.x1', x1, (int,), False, False, False)
+        _guard_scalar('ImageAnnotatorRect.y1', y1, (int,), False, False, False)
+        _guard_scalar('ImageAnnotatorRect.x2', x2, (int,), False, False, False)
+        _guard_scalar('ImageAnnotatorRect.y2', y2, (int,), False, False, False)
+        self.x1 = x1
+        """`x` coordinate of the rectangle's corner."""
+        self.y1 = y1
+        """`y` coordinate of the rectangle's corner."""
+        self.x2 = x2
+        """`x` coordinate of the diagonally opposite corner."""
+        self.y2 = y2
+        """`y` coordinate of the diagonally opposite corner."""
+
+    def dump(self) -> Dict:
+        """Returns the contents of this object as a dict."""
+        _guard_scalar('ImageAnnotatorRect.x1', self.x1, (int,), False, False, False)
+        _guard_scalar('ImageAnnotatorRect.y1', self.y1, (int,), False, False, False)
+        _guard_scalar('ImageAnnotatorRect.x2', self.x2, (int,), False, False, False)
+        _guard_scalar('ImageAnnotatorRect.y2', self.y2, (int,), False, False, False)
+        return _dump(
+            x1=self.x1,
+            y1=self.y1,
+            x2=self.x2,
+            y2=self.y2,
+        )
+
+    @staticmethod
+    def load(__d: Dict) -> 'ImageAnnotatorRect':
+        """Creates an instance of this class using the contents of a dict."""
+        __d_x1: Any = __d.get('x1')
+        _guard_scalar('ImageAnnotatorRect.x1', __d_x1, (int,), False, False, False)
+        __d_y1: Any = __d.get('y1')
+        _guard_scalar('ImageAnnotatorRect.y1', __d_y1, (int,), False, False, False)
+        __d_x2: Any = __d.get('x2')
+        _guard_scalar('ImageAnnotatorRect.x2', __d_x2, (int,), False, False, False)
+        __d_y2: Any = __d.get('y2')
+        _guard_scalar('ImageAnnotatorRect.y2', __d_y2, (int,), False, False, False)
+        x1: int = __d_x1
+        y1: int = __d_y1
+        x2: int = __d_x2
+        y2: int = __d_y2
+        return ImageAnnotatorRect(
+            x1,
+            y1,
+            x2,
+            y2,
+        )
+
+
+class ImageAnnotatorShape:
+    """Create a shape to be rendered as an annotation on an image annotator.
+    """
+    def __init__(
+            self,
+            rect: Optional[ImageAnnotatorRect] = None,
+    ):
+        _guard_scalar('ImageAnnotatorShape.rect', rect, (ImageAnnotatorRect,), False, True, False)
+        self.rect = rect
+        """No documentation available."""
+
+    def dump(self) -> Dict:
+        """Returns the contents of this object as a dict."""
+        _guard_scalar('ImageAnnotatorShape.rect', self.rect, (ImageAnnotatorRect,), False, True, False)
+        return _dump(
+            rect=None if self.rect is None else self.rect.dump(),
+        )
+
+    @staticmethod
+    def load(__d: Dict) -> 'ImageAnnotatorShape':
+        """Creates an instance of this class using the contents of a dict."""
+        __d_rect: Any = __d.get('rect')
+        _guard_scalar('ImageAnnotatorShape.rect', __d_rect, (dict,), False, True, False)
+        rect: Optional[ImageAnnotatorRect] = None if __d_rect is None else ImageAnnotatorRect.load(__d_rect)
+        return ImageAnnotatorShape(
+            rect,
+        )
+
+
+class ImageAnnotatorItem:
+    """Create an annotator item with initial selected tags or no tag for plaintext.
+    """
+    def __init__(
+            self,
+            shape: ImageAnnotatorShape,
+            tag: str,
+    ):
+        _guard_scalar('ImageAnnotatorItem.shape', shape, (ImageAnnotatorShape,), False, False, False)
+        _guard_scalar('ImageAnnotatorItem.tag', tag, (str,), False, False, False)
+        self.shape = shape
+        """The annotation shape."""
+        self.tag = tag
+        """The `name` of the image annotator tag to refer to for the `label` and `color` of this item."""
+
+    def dump(self) -> Dict:
+        """Returns the contents of this object as a dict."""
+        _guard_scalar('ImageAnnotatorItem.shape', self.shape, (ImageAnnotatorShape,), False, False, False)
+        _guard_scalar('ImageAnnotatorItem.tag', self.tag, (str,), False, False, False)
+        return _dump(
+            shape=self.shape.dump(),
+            tag=self.tag,
+        )
+
+    @staticmethod
+    def load(__d: Dict) -> 'ImageAnnotatorItem':
+        """Creates an instance of this class using the contents of a dict."""
+        __d_shape: Any = __d.get('shape')
+        _guard_scalar('ImageAnnotatorItem.shape', __d_shape, (dict,), False, False, False)
+        __d_tag: Any = __d.get('tag')
+        _guard_scalar('ImageAnnotatorItem.tag', __d_tag, (str,), False, False, False)
+        shape: ImageAnnotatorShape = ImageAnnotatorShape.load(__d_shape)
+        tag: str = __d_tag
+        return ImageAnnotatorItem(
+            shape,
+            tag,
+        )
+
+
+class ImageAnnotator:
+    """Create an image annotator component.
+
+    This component allows annotating and labeling parts of an image by drawing shapes with a pointing device.
+    """
+    def __init__(
+            self,
+            name: str,
+            image: str,
+            title: str,
+            tags: List[ImageAnnotatorTag],
+            items: Optional[List[ImageAnnotatorItem]] = None,
+            trigger: Optional[bool] = None,
+            image_height: Optional[str] = None,
+    ):
+        _guard_scalar('ImageAnnotator.name', name, (str,), True, False, False)
+        _guard_scalar('ImageAnnotator.image', image, (str,), False, False, False)
+        _guard_scalar('ImageAnnotator.title', title, (str,), False, False, False)
+        _guard_vector('ImageAnnotator.tags', tags, (ImageAnnotatorTag,), False, False, False)
+        _guard_vector('ImageAnnotator.items', items, (ImageAnnotatorItem,), False, True, False)
+        _guard_scalar('ImageAnnotator.trigger', trigger, (bool,), False, True, False)
+        _guard_scalar('ImageAnnotator.image_height', image_height, (str,), False, True, False)
+        self.name = name
+        """An identifying name for this component."""
+        self.image = image
+        """The path or URL of the image to be presented for annotation."""
+        self.title = title
+        """The image annotator's title."""
+        self.tags = tags
+        """The master list of tags that can be used for annotations."""
+        self.items = items
+        """Annotations to display on the image, if any."""
+        self.trigger = trigger
+        """True if the form should be submitted as soon as an annotation is drawn."""
+        self.image_height = image_height
+        """The card’s image height. The actual image size is used by default."""
+
+    def dump(self) -> Dict:
+        """Returns the contents of this object as a dict."""
+        _guard_scalar('ImageAnnotator.name', self.name, (str,), True, False, False)
+        _guard_scalar('ImageAnnotator.image', self.image, (str,), False, False, False)
+        _guard_scalar('ImageAnnotator.title', self.title, (str,), False, False, False)
+        _guard_vector('ImageAnnotator.tags', self.tags, (ImageAnnotatorTag,), False, False, False)
+        _guard_vector('ImageAnnotator.items', self.items, (ImageAnnotatorItem,), False, True, False)
+        _guard_scalar('ImageAnnotator.trigger', self.trigger, (bool,), False, True, False)
+        _guard_scalar('ImageAnnotator.image_height', self.image_height, (str,), False, True, False)
+        return _dump(
+            name=self.name,
+            image=self.image,
+            title=self.title,
+            tags=[__e.dump() for __e in self.tags],
+            items=None if self.items is None else [__e.dump() for __e in self.items],
+            trigger=self.trigger,
+            image_height=self.image_height,
+        )
+
+    @staticmethod
+    def load(__d: Dict) -> 'ImageAnnotator':
+        """Creates an instance of this class using the contents of a dict."""
+        __d_name: Any = __d.get('name')
+        _guard_scalar('ImageAnnotator.name', __d_name, (str,), True, False, False)
+        __d_image: Any = __d.get('image')
+        _guard_scalar('ImageAnnotator.image', __d_image, (str,), False, False, False)
+        __d_title: Any = __d.get('title')
+        _guard_scalar('ImageAnnotator.title', __d_title, (str,), False, False, False)
+        __d_tags: Any = __d.get('tags')
+        _guard_vector('ImageAnnotator.tags', __d_tags, (dict,), False, False, False)
+        __d_items: Any = __d.get('items')
+        _guard_vector('ImageAnnotator.items', __d_items, (dict,), False, True, False)
+        __d_trigger: Any = __d.get('trigger')
+        _guard_scalar('ImageAnnotator.trigger', __d_trigger, (bool,), False, True, False)
+        __d_image_height: Any = __d.get('image_height')
+        _guard_scalar('ImageAnnotator.image_height', __d_image_height, (str,), False, True, False)
+        name: str = __d_name
+        image: str = __d_image
+        title: str = __d_title
+        tags: List[ImageAnnotatorTag] = [ImageAnnotatorTag.load(__e) for __e in __d_tags]
+        items: Optional[List[ImageAnnotatorItem]] = None if __d_items is None else [ImageAnnotatorItem.load(__e) for __e in __d_items]
+        trigger: Optional[bool] = __d_trigger
+        image_height: Optional[str] = __d_image_height
+        return ImageAnnotator(
+            name,
+            image,
+            title,
+            tags,
+            items,
+            trigger,
+            image_height,
+        )
+
+
 class Facepile:
     """A face pile displays a list of personas. Each circle represents a person and contains their image or initials.
     Often this control is used when sharing who has access to a specific view or file.
@@ -6532,6 +6799,7 @@ def __init__(
             image: Optional[Image] = None,
             persona: Optional[Persona] = None,
             text_annotator: Optional[TextAnnotator] = None,
+            image_annotator: Optional[ImageAnnotator] = None,
             facepile: Optional[Facepile] = None,
             copyable_text: Optional[CopyableText] = None,
             menu: Optional[Menu] = None,
@@ -6581,6 +6849,7 @@ def __init__(
         _guard_scalar('Component.image', image, (Image,), False, True, False)
         _guard_scalar('Component.persona', persona, (Persona,), False, True, False)
         _guard_scalar('Component.text_annotator', text_annotator, (TextAnnotator,), False, True, False)
+        _guard_scalar('Component.image_annotator', image_annotator, (ImageAnnotator,), False, True, False)
         _guard_scalar('Component.facepile', facepile, (Facepile,), False, True, False)
         _guard_scalar('Component.copyable_text', copyable_text, (CopyableText,), False, True, False)
         _guard_scalar('Component.menu', menu, (Menu,), False, True, False)
@@ -6672,7 +6941,9 @@ def __init__(
         self.persona = persona
         """Persona."""
         self.text_annotator = text_annotator
-        """Annotator."""
+        """Text annotator."""
+        self.image_annotator = image_annotator
+        """Image annotator."""
         self.facepile = facepile
         """Facepile."""
         self.copyable_text = copyable_text
@@ -6728,6 +6999,7 @@ def dump(self) -> Dict:
         _guard_scalar('Component.image', self.image, (Image,), False, True, False)
         _guard_scalar('Component.persona', self.persona, (Persona,), False, True, False)
         _guard_scalar('Component.text_annotator', self.text_annotator, (TextAnnotator,), False, True, False)
+        _guard_scalar('Component.image_annotator', self.image_annotator, (ImageAnnotator,), False, True, False)
         _guard_scalar('Component.facepile', self.facepile, (Facepile,), False, True, False)
         _guard_scalar('Component.copyable_text', self.copyable_text, (CopyableText,), False, True, False)
         _guard_scalar('Component.menu', self.menu, (Menu,), False, True, False)
@@ -6777,6 +7049,7 @@ def dump(self) -> Dict:
             image=None if self.image is None else self.image.dump(),
             persona=None if self.persona is None else self.persona.dump(),
             text_annotator=None if self.text_annotator is None else self.text_annotator.dump(),
+            image_annotator=None if self.image_annotator is None else self.image_annotator.dump(),
             facepile=None if self.facepile is None else self.facepile.dump(),
             copyable_text=None if self.copyable_text is None else self.copyable_text.dump(),
             menu=None if self.menu is None else self.menu.dump(),
@@ -6874,6 +7147,8 @@ def load(__d: Dict) -> 'Component':
         _guard_scalar('Component.persona', __d_persona, (dict,), False, True, False)
         __d_text_annotator: Any = __d.get('text_annotator')
         _guard_scalar('Component.text_annotator', __d_text_annotator, (dict,), False, True, False)
+        __d_image_annotator: Any = __d.get('image_annotator')
+        _guard_scalar('Component.image_annotator', __d_image_annotator, (dict,), False, True, False)
         __d_facepile: Any = __d.get('facepile')
         _guard_scalar('Component.facepile', __d_facepile, (dict,), False, True, False)
         __d_copyable_text: Any = __d.get('copyable_text')
@@ -6926,6 +7201,7 @@ def load(__d: Dict) -> 'Component':
         image: Optional[Image] = None if __d_image is None else Image.load(__d_image)
         persona: Optional[Persona] = None if __d_persona is None else Persona.load(__d_persona)
         text_annotator: Optional[TextAnnotator] = None if __d_text_annotator is None else TextAnnotator.load(__d_text_annotator)
+        image_annotator: Optional[ImageAnnotator] = None if __d_image_annotator is None else ImageAnnotator.load(__d_image_annotator)
         facepile: Optional[Facepile] = None if __d_facepile is None else Facepile.load(__d_facepile)
         copyable_text: Optional[CopyableText] = None if __d_copyable_text is None else CopyableText.load(__d_copyable_text)
         menu: Optional[Menu] = None if __d_menu is None else Menu.load(__d_menu)
@@ -6975,6 +7251,7 @@ def load(__d: Dict) -> 'Component':
             image,
             persona,
             text_annotator,
+            image_annotator,
             facepile,
             copyable_text,
             menu,
diff --git a/py/h2o_wave/ui.py b/py/h2o_wave/ui.py
index 7bc1e8011c..a41653e4a5 100644
--- a/py/h2o_wave/ui.py
+++ b/py/h2o_wave/ui.py
@@ -2298,7 +2298,7 @@ def text_annotator_item(
 
     Args:
         text: Text to be highlighted.
-        tag: Tag connected to the highlighted text.
+        tag: The `name` of the text annotator tag to refer to for the `label` and `color` of this item.
     Returns:
         A `h2o_wave.types.TextAnnotatorItem` instance.
     """
@@ -2340,6 +2340,104 @@ def text_annotator(
     ))
 
 
+def image_annotator_tag(
+        name: str,
+        label: str,
+        color: str,
+) -> ImageAnnotatorTag:
+    """Create a unique tag type for use in an image annotator.
+
+    Args:
+        name: An identifying name for this tag.
+        label: Text to be displayed for the annotation.
+        color: Hex or RGB color string to be used as the background color.
+    Returns:
+        A `h2o_wave.types.ImageAnnotatorTag` instance.
+    """
+    return ImageAnnotatorTag(
+        name,
+        label,
+        color,
+    )
+
+
+def image_annotator_rect(
+        x1: int,
+        y1: int,
+        x2: int,
+        y2: int,
+) -> ImageAnnotatorShape:
+    """Create a rectangular annotation shape.
+
+    Args:
+        x1: `x` coordinate of the rectangle's corner.
+        y1: `y` coordinate of the rectangle's corner.
+        x2: `x` coordinate of the diagonally opposite corner.
+        y2: `y` coordinate of the diagonally opposite corner.
+    Returns:
+        A `h2o_wave.types.ImageAnnotatorRect` instance.
+    """
+    return ImageAnnotatorShape(rect=ImageAnnotatorRect(
+        x1,
+        y1,
+        x2,
+        y2,
+    ))
+
+
+def image_annotator_item(
+        shape: ImageAnnotatorShape,
+        tag: str,
+) -> ImageAnnotatorItem:
+    """Create an annotator item with initial selected tags or no tag for plaintext.
+
+    Args:
+        shape: The annotation shape.
+        tag: The `name` of the image annotator tag to refer to for the `label` and `color` of this item.
+    Returns:
+        A `h2o_wave.types.ImageAnnotatorItem` instance.
+    """
+    return ImageAnnotatorItem(
+        shape,
+        tag,
+    )
+
+
+def image_annotator(
+        name: str,
+        image: str,
+        title: str,
+        tags: List[ImageAnnotatorTag],
+        items: Optional[List[ImageAnnotatorItem]] = None,
+        trigger: Optional[bool] = None,
+        image_height: Optional[str] = None,
+) -> Component:
+    """Create an image annotator component.
+
+    This component allows annotating and labeling parts of an image by drawing shapes with a pointing device.
+
+    Args:
+        name: An identifying name for this component.
+        image: The path or URL of the image to be presented for annotation.
+        title: The image annotator's title.
+        tags: The master list of tags that can be used for annotations.
+        items: Annotations to display on the image, if any.
+        trigger: True if the form should be submitted as soon as an annotation is drawn.
+        image_height: The card’s image height. The actual image size is used by default.
+    Returns:
+        A `h2o_wave.types.ImageAnnotator` instance.
+    """
+    return Component(image_annotator=ImageAnnotator(
+        name,
+        image,
+        title,
+        tags,
+        items,
+        trigger,
+        image_height,
+    ))
+
+
 def facepile(
         items: List[Component],
         name: Optional[str] = None,
diff --git a/r/R/ui.R b/r/R/ui.R
index f6f11b2761..4b67050e7c 100644
--- a/r/R/ui.R
+++ b/r/R/ui.R
@@ -2679,7 +2679,7 @@ ui_text_annotator_tag <- function(
 #' Create an annotator item with initial selected tags or no tag for plaintext.
 #'
 #' @param text Text to be highlighted.
-#' @param tag Tag connected to the highlighted text.
+#' @param tag The `name` of the text annotator tag to refer to for the `label` and `color` of this item.
 #' @return A TextAnnotatorItem instance.
 #' @export
 ui_text_annotator_item <- function(
@@ -2730,6 +2730,112 @@ ui_text_annotator <- function(
   return(.o)
 }
 
+#' Create a unique tag type for use in an image annotator.
+#'
+#' @param name An identifying name for this tag.
+#' @param label Text to be displayed for the annotation.
+#' @param color Hex or RGB color string to be used as the background color.
+#' @return A ImageAnnotatorTag instance.
+#' @export
+ui_image_annotator_tag <- function(
+  name,
+  label,
+  color) {
+  .guard_scalar("name", "character", name)
+  .guard_scalar("label", "character", label)
+  .guard_scalar("color", "character", color)
+  .o <- list(
+    name=name,
+    label=label,
+    color=color)
+  class(.o) <- append(class(.o), c(.wave_obj, "WaveImageAnnotatorTag"))
+  return(.o)
+}
+
+#' Create a rectangular annotation shape.
+#'
+#' @param x1 `x` coordinate of the rectangle's corner.
+#' @param y1 `y` coordinate of the rectangle's corner.
+#' @param x2 `x` coordinate of the diagonally opposite corner.
+#' @param y2 `y` coordinate of the diagonally opposite corner.
+#' @return A ImageAnnotatorRect instance.
+#' @export
+ui_image_annotator_rect <- function(
+  x1,
+  y1,
+  x2,
+  y2) {
+  .guard_scalar("x1", "numeric", x1)
+  .guard_scalar("y1", "numeric", y1)
+  .guard_scalar("x2", "numeric", x2)
+  .guard_scalar("y2", "numeric", y2)
+  .o <- list(rect=list(
+    x1=x1,
+    y1=y1,
+    x2=x2,
+    y2=y2))
+  class(.o) <- append(class(.o), c(.wave_obj, "WaveImageAnnotatorShape"))
+  return(.o)
+}
+
+#' Create an annotator item with initial selected tags or no tag for plaintext.
+#'
+#' @param shape The annotation shape.
+#' @param tag The `name` of the image annotator tag to refer to for the `label` and `color` of this item.
+#' @return A ImageAnnotatorItem instance.
+#' @export
+ui_image_annotator_item <- function(
+  shape,
+  tag) {
+  .guard_scalar("shape", "WaveImageAnnotatorShape", shape)
+  .guard_scalar("tag", "character", tag)
+  .o <- list(
+    shape=shape,
+    tag=tag)
+  class(.o) <- append(class(.o), c(.wave_obj, "WaveImageAnnotatorItem"))
+  return(.o)
+}
+
+#' Create an image annotator component.
+#' 
+#' This component allows annotating and labeling parts of an image by drawing shapes with a pointing device.
+#'
+#' @param name An identifying name for this component.
+#' @param image The path or URL of the image to be presented for annotation.
+#' @param title The image annotator's title.
+#' @param tags The master list of tags that can be used for annotations.
+#' @param items Annotations to display on the image, if any.
+#' @param trigger True if the form should be submitted as soon as an annotation is drawn.
+#' @param image_height The card’s image height. The actual image size is used by default.
+#' @return A ImageAnnotator instance.
+#' @export
+ui_image_annotator <- function(
+  name,
+  image,
+  title,
+  tags,
+  items = NULL,
+  trigger = NULL,
+  image_height = NULL) {
+  .guard_scalar("name", "character", name)
+  .guard_scalar("image", "character", image)
+  .guard_scalar("title", "character", title)
+  .guard_vector("tags", "WaveImageAnnotatorTag", tags)
+  .guard_vector("items", "WaveImageAnnotatorItem", items)
+  .guard_scalar("trigger", "logical", trigger)
+  .guard_scalar("image_height", "character", image_height)
+  .o <- list(image_annotator=list(
+    name=name,
+    image=image,
+    title=title,
+    tags=tags,
+    items=items,
+    trigger=trigger,
+    image_height=image_height))
+  class(.o) <- append(class(.o), c(.wave_obj, "WaveComponent"))
+  return(.o)
+}
+
 #' A face pile displays a list of personas. Each circle represents a person and contains their image or initials.
 #' Often this control is used when sharing who has access to a specific view or file.
 #'
diff --git a/tools/intellij-plugin/src/main/resources/templates/wave-components.xml b/tools/intellij-plugin/src/main/resources/templates/wave-components.xml
index 5444100157..ca76f7c9fb 100644
--- a/tools/intellij-plugin/src/main/resources/templates/wave-components.xml
+++ b/tools/intellij-plugin/src/main/resources/templates/wave-components.xml
@@ -223,6 +223,39 @@
       <option name="Python" value="true"/>
     </context>
   </template>
+  <template name="w_image_annotator_rect" value="ui.image_annotator_rect(x1=$x1$,y1=$y1$,x2=$x2$,y2=$y2$),$END$" description="Create a minimal Wave ImageAnnotatorRect." toReformat="true" toShortenFQNames="true">
+    <variable name="x1" expression="" defaultValue="&quot;None&quot;" alwaysStopAt="true"/>
+    <variable name="y1" expression="" defaultValue="&quot;None&quot;" alwaysStopAt="true"/>
+    <variable name="x2" expression="" defaultValue="&quot;None&quot;" alwaysStopAt="true"/>
+    <variable name="y2" expression="" defaultValue="&quot;None&quot;" alwaysStopAt="true"/>
+    <context>
+      <option name="Python" value="true"/>
+    </context>
+  </template>
+  <template name="w_image_annotator_tag" value="ui.image_annotator_tag(name='$name$',label='$label$',color='$color$'),$END$" description="Create a minimal Wave ImageAnnotatorTag." toReformat="true" toShortenFQNames="true">
+    <variable name="name" expression="" defaultValue="" alwaysStopAt="true"/>
+    <variable name="label" expression="" defaultValue="" alwaysStopAt="true"/>
+    <variable name="color" expression="" defaultValue="" alwaysStopAt="true"/>
+    <context>
+      <option name="Python" value="true"/>
+    </context>
+  </template>
+  <template name="w_image_annotator_item" value="ui.image_annotator_item(shape=$shape$,tag='$tag$'),$END$" description="Create a minimal Wave ImageAnnotatorItem." toReformat="true" toShortenFQNames="true">
+    <variable name="shape" expression="" defaultValue="" alwaysStopAt="true"/>
+    <variable name="tag" expression="" defaultValue="" alwaysStopAt="true"/>
+    <context>
+      <option name="Python" value="true"/>
+    </context>
+  </template>
+  <template name="w_image_annotator" value="ui.image_annotator(name='$name$',image='$image$',title='$title$',tags=[&#10;	$tags$	&#10;]),$END$" description="Create a minimal Wave ImageAnnotator." toReformat="true" toShortenFQNames="true">
+    <variable name="name" expression="" defaultValue="" alwaysStopAt="true"/>
+    <variable name="image" expression="" defaultValue="" alwaysStopAt="true"/>
+    <variable name="title" expression="" defaultValue="" alwaysStopAt="true"/>
+    <variable name="tags" expression="" defaultValue="" alwaysStopAt="true"/>
+    <context>
+      <option name="Python" value="true"/>
+    </context>
+  </template>
   <template name="w_label" value="ui.label(label='$label$'),$END$" description="Create a minimal Wave Label." toReformat="true" toShortenFQNames="true">
     <variable name="label" expression="" defaultValue="" alwaysStopAt="true"/>
     <context>
@@ -1195,7 +1228,7 @@
       <option name="Python" value="true"/>
     </context>
   </template>
-  <template name="w_full_component" value="ui.component(text=$text$,text_xl=$text_xl$,text_l=$text_l$,text_m=$text_m$,text_s=$text_s$,text_xs=$text_xs$,label=$label$,separator=$separator$,progress=$progress$,message_bar=$message_bar$,textbox=$textbox$,checkbox=$checkbox$,toggle=$toggle$,choice_group=$choice_group$,checklist=$checklist$,dropdown=$dropdown$,combobox=$combobox$,slider=$slider$,spinbox=$spinbox$,date_picker=$date_picker$,color_picker=$color_picker$,button=$button$,buttons=$buttons$,mini_button=$mini_button$,mini_buttons=$mini_buttons$,file_upload=$file_upload$,table=$table$,link=$link$,links=$links$,tabs=$tabs$,expander=$expander$,frame=$frame$,markup=$markup$,template=$template$,picker=$picker$,range_slider=$range_slider$,stepper=$stepper$,visualization=$visualization$,vega_visualization=$vega_visualization$,stats=$stats$,inline=$inline$,image=$image$,persona=$persona$,text_annotator=$text_annotator$,facepile=$facepile$,copyable_text=$copyable_text$,menu=$menu$,tags=$tags$),$END$" description="Create Wave Component with full attributes." toReformat="true" toShortenFQNames="true">
+  <template name="w_full_component" value="ui.component(text=$text$,text_xl=$text_xl$,text_l=$text_l$,text_m=$text_m$,text_s=$text_s$,text_xs=$text_xs$,label=$label$,separator=$separator$,progress=$progress$,message_bar=$message_bar$,textbox=$textbox$,checkbox=$checkbox$,toggle=$toggle$,choice_group=$choice_group$,checklist=$checklist$,dropdown=$dropdown$,combobox=$combobox$,slider=$slider$,spinbox=$spinbox$,date_picker=$date_picker$,color_picker=$color_picker$,button=$button$,buttons=$buttons$,mini_button=$mini_button$,mini_buttons=$mini_buttons$,file_upload=$file_upload$,table=$table$,link=$link$,links=$links$,tabs=$tabs$,expander=$expander$,frame=$frame$,markup=$markup$,template=$template$,picker=$picker$,range_slider=$range_slider$,stepper=$stepper$,visualization=$visualization$,vega_visualization=$vega_visualization$,stats=$stats$,inline=$inline$,image=$image$,persona=$persona$,text_annotator=$text_annotator$,image_annotator=$image_annotator$,facepile=$facepile$,copyable_text=$copyable_text$,menu=$menu$,tags=$tags$),$END$" description="Create Wave Component with full attributes." toReformat="true" toShortenFQNames="true">
     <variable name="text" expression="" defaultValue="" alwaysStopAt="true"/>
     <variable name="text_xl" expression="" defaultValue="" alwaysStopAt="true"/>
     <variable name="text_l" expression="" defaultValue="" alwaysStopAt="true"/>
@@ -1240,6 +1273,7 @@
     <variable name="image" expression="" defaultValue="" alwaysStopAt="true"/>
     <variable name="persona" expression="" defaultValue="" alwaysStopAt="true"/>
     <variable name="text_annotator" expression="" defaultValue="" alwaysStopAt="true"/>
+    <variable name="image_annotator" expression="" defaultValue="" alwaysStopAt="true"/>
     <variable name="facepile" expression="" defaultValue="" alwaysStopAt="true"/>
     <variable name="copyable_text" expression="" defaultValue="" alwaysStopAt="true"/>
     <variable name="menu" expression="" defaultValue="" alwaysStopAt="true"/>
@@ -1354,6 +1388,48 @@
       <option name="Python" value="true"/>
     </context>
   </template>
+  <template name="w_full_image_annotator_rect" value="ui.image_annotator_rect(x1=$x1$,y1=$y1$,x2=$x2$,y2=$y2$),$END$" description="Create Wave ImageAnnotatorRect with full attributes." toReformat="true" toShortenFQNames="true">
+    <variable name="x1" expression="" defaultValue="&quot;None&quot;" alwaysStopAt="true"/>
+    <variable name="y1" expression="" defaultValue="&quot;None&quot;" alwaysStopAt="true"/>
+    <variable name="x2" expression="" defaultValue="&quot;None&quot;" alwaysStopAt="true"/>
+    <variable name="y2" expression="" defaultValue="&quot;None&quot;" alwaysStopAt="true"/>
+    <context>
+      <option name="Python" value="true"/>
+    </context>
+  </template>
+  <template name="w_full_image_annotator_shape" value="ui.image_annotator_shape(rect=$rect$),$END$" description="Create Wave ImageAnnotatorShape with full attributes." toReformat="true" toShortenFQNames="true">
+    <variable name="rect" expression="" defaultValue="" alwaysStopAt="true"/>
+    <context>
+      <option name="Python" value="true"/>
+    </context>
+  </template>
+  <template name="w_full_image_annotator_tag" value="ui.image_annotator_tag(name='$name$',label='$label$',color='$color$'),$END$" description="Create Wave ImageAnnotatorTag with full attributes." toReformat="true" toShortenFQNames="true">
+    <variable name="name" expression="" defaultValue="" alwaysStopAt="true"/>
+    <variable name="label" expression="" defaultValue="" alwaysStopAt="true"/>
+    <variable name="color" expression="" defaultValue="" alwaysStopAt="true"/>
+    <context>
+      <option name="Python" value="true"/>
+    </context>
+  </template>
+  <template name="w_full_image_annotator_item" value="ui.image_annotator_item(shape=$shape$,tag='$tag$'),$END$" description="Create Wave ImageAnnotatorItem with full attributes." toReformat="true" toShortenFQNames="true">
+    <variable name="shape" expression="" defaultValue="" alwaysStopAt="true"/>
+    <variable name="tag" expression="" defaultValue="" alwaysStopAt="true"/>
+    <context>
+      <option name="Python" value="true"/>
+    </context>
+  </template>
+  <template name="w_full_image_annotator" value="ui.image_annotator(name='$name$',image='$image$',title='$title$',trigger=$trigger$,image_height='$image_height$',tags=[&#10;	$tags$	&#10;],items=[&#10;	$items$	&#10;]),$END$" description="Create Wave ImageAnnotator with full attributes." toReformat="true" toShortenFQNames="true">
+    <variable name="name" expression="" defaultValue="" alwaysStopAt="true"/>
+    <variable name="image" expression="" defaultValue="" alwaysStopAt="true"/>
+    <variable name="title" expression="" defaultValue="" alwaysStopAt="true"/>
+    <variable name="trigger" expression="" defaultValue="&quot;False&quot;" alwaysStopAt="true"/>
+    <variable name="image_height" expression="" defaultValue="" alwaysStopAt="true"/>
+    <variable name="tags" expression="" defaultValue="" alwaysStopAt="true"/>
+    <variable name="items" expression="" defaultValue="" alwaysStopAt="true"/>
+    <context>
+      <option name="Python" value="true"/>
+    </context>
+  </template>
   <template name="w_full_label" value="ui.label(label='$label$',required=$required$,disabled=$disabled$,width='$width$',visible=$visible$,tooltip='$tooltip$',name='$name$'),$END$" description="Create Wave Label with full attributes." toReformat="true" toShortenFQNames="true">
     <variable name="label" expression="" defaultValue="" alwaysStopAt="true"/>
     <variable name="required" expression="" defaultValue="&quot;False&quot;" alwaysStopAt="true"/>
diff --git a/tools/vscode-extension/component-snippets.json b/tools/vscode-extension/component-snippets.json
index 74f2887611..5032f7fa00 100644
--- a/tools/vscode-extension/component-snippets.json
+++ b/tools/vscode-extension/component-snippets.json
@@ -230,6 +230,34 @@
     ],
     "description": "Create a minimal Wave Image."
   },
+  "Wave ImageAnnotatorRect": {
+    "prefix": "w_image_annotator_rect",
+    "body": [
+      "ui.image_annotator_rect(x1=${1:None}, y1=${2:None}, x2=${3:None}, y2=${4:None}),$0"
+    ],
+    "description": "Create a minimal Wave ImageAnnotatorRect."
+  },
+  "Wave ImageAnnotatorTag": {
+    "prefix": "w_image_annotator_tag",
+    "body": [
+      "ui.image_annotator_tag(name='$1', label='$2', color='$3'),$0"
+    ],
+    "description": "Create a minimal Wave ImageAnnotatorTag."
+  },
+  "Wave ImageAnnotatorItem": {
+    "prefix": "w_image_annotator_item",
+    "body": [
+      "ui.image_annotator_item(shape=$1, tag='$2'),$0"
+    ],
+    "description": "Create a minimal Wave ImageAnnotatorItem."
+  },
+  "Wave ImageAnnotator": {
+    "prefix": "w_image_annotator",
+    "body": [
+      "ui.image_annotator(name='$1', image='$2', title='$3', tags=[\n\t\t$4\t\t\n]),$0"
+    ],
+    "description": "Create a minimal Wave ImageAnnotator."
+  },
   "Wave Label": {
     "prefix": "w_label",
     "body": [
@@ -1052,7 +1080,7 @@
   "Wave Full Component": {
     "prefix": "w_full_component",
     "body": [
-      "ui.component(text=$1, text_xl=$2, text_l=$3, text_m=$4, text_s=$5, text_xs=$6, label=$7, separator=$8, progress=$9, message_bar=$10, textbox=$11, checkbox=$12, toggle=$13, choice_group=$14, checklist=$15, dropdown=$16, combobox=$17, slider=$18, spinbox=$19, date_picker=$20, color_picker=$21, button=$22, buttons=$23, mini_button=$24, mini_buttons=$25, file_upload=$26, table=$27, link=$28, links=$29, tabs=$30, expander=$31, frame=$32, markup=$33, template=$34, picker=$35, range_slider=$36, stepper=$37, visualization=$38, vega_visualization=$39, stats=$40, inline=$41, image=$42, persona=$43, text_annotator=$44, facepile=$45, copyable_text=$46, menu=$47, tags=$48),$0"
+      "ui.component(text=$1, text_xl=$2, text_l=$3, text_m=$4, text_s=$5, text_xs=$6, label=$7, separator=$8, progress=$9, message_bar=$10, textbox=$11, checkbox=$12, toggle=$13, choice_group=$14, checklist=$15, dropdown=$16, combobox=$17, slider=$18, spinbox=$19, date_picker=$20, color_picker=$21, button=$22, buttons=$23, mini_button=$24, mini_buttons=$25, file_upload=$26, table=$27, link=$28, links=$29, tabs=$30, expander=$31, frame=$32, markup=$33, template=$34, picker=$35, range_slider=$36, stepper=$37, visualization=$38, vega_visualization=$39, stats=$40, inline=$41, image=$42, persona=$43, text_annotator=$44, image_annotator=$45, facepile=$46, copyable_text=$47, menu=$48, tags=$49),$0"
     ],
     "description": "Create a full Wave Component."
   },
@@ -1126,6 +1154,41 @@
     ],
     "description": "Create a full Wave Image."
   },
+  "Wave Full ImageAnnotatorRect": {
+    "prefix": "w_full_image_annotator_rect",
+    "body": [
+      "ui.image_annotator_rect(x1=${1:None}, y1=${2:None}, x2=${3:None}, y2=${4:None}),$0"
+    ],
+    "description": "Create a full Wave ImageAnnotatorRect."
+  },
+  "Wave Full ImageAnnotatorShape": {
+    "prefix": "w_full_image_annotator_shape",
+    "body": [
+      "ui.image_annotator_shape(rect=$1),$0"
+    ],
+    "description": "Create a full Wave ImageAnnotatorShape."
+  },
+  "Wave Full ImageAnnotatorTag": {
+    "prefix": "w_full_image_annotator_tag",
+    "body": [
+      "ui.image_annotator_tag(name='$1', label='$2', color='$3'),$0"
+    ],
+    "description": "Create a full Wave ImageAnnotatorTag."
+  },
+  "Wave Full ImageAnnotatorItem": {
+    "prefix": "w_full_image_annotator_item",
+    "body": [
+      "ui.image_annotator_item(shape=$1, tag='$2'),$0"
+    ],
+    "description": "Create a full Wave ImageAnnotatorItem."
+  },
+  "Wave Full ImageAnnotator": {
+    "prefix": "w_full_image_annotator",
+    "body": [
+      "ui.image_annotator(name='$1', image='$2', title='$3', trigger=${4:False}, image_height='$5', tags=[\n\t\t$6\t\t\n], items=[\n\t\t$7\t\t\n]),$0"
+    ],
+    "description": "Create a full Wave ImageAnnotator."
+  },
   "Wave Full Label": {
     "prefix": "w_full_label",
     "body": [
diff --git a/ui/src/form.tsx b/ui/src/form.tsx
index 904c29f76e..de9542f94a 100644
--- a/ui/src/form.tsx
+++ b/ui/src/form.tsx
@@ -51,6 +51,7 @@ import { Template, XTemplate } from './template'
 import { Text, TextL, TextM, TextS, TextXl, TextXs, XText } from './text'
 import { Textbox, XTextbox } from './textbox'
 import { TextAnnotator, XTextAnnotator } from './text_annotator'
+import { ImageAnnotator, XImageAnnotator } from './image_annotator'
 import { clas, cssVar, justifications, padding } from './theme'
 import { Toggle, XToggle } from './toggle'
 import { XToolTip } from './tooltip'
@@ -147,8 +148,10 @@ export interface Component {
   image?: Image
   /** Persona. */
   persona?: Persona
-  /** Annotator. */
+  /** Text annotator. */
   text_annotator?: TextAnnotator
+  /** Image annotator. */
+  image_annotator?: ImageAnnotator
   /** Facepile. */
   facepile?: Facepile
   /** Copyable text. */
@@ -284,6 +287,7 @@ const
     if (m.image) return <XImage model={m.image} />
     if (m.persona) return <XPersona model={m.persona} />
     if (m.text_annotator) return <XTextAnnotator model={m.text_annotator} />
+    if (m.image_annotator) return <XImageAnnotator model={m.image_annotator} />
     if (m.mini_button) return <XMiniButton model={m.mini_button} />
     if (m.mini_buttons) return <XMiniButtons model={m.mini_buttons} />
     if (m.facepile) return <XFacepile model={m.facepile} />
diff --git a/ui/src/image_annotator.tsx b/ui/src/image_annotator.tsx
new file mode 100644
index 0000000000..eb1fd7f62d
--- /dev/null
+++ b/ui/src/image_annotator.tsx
@@ -0,0 +1,364 @@
+import * as Fluent from '@fluentui/react'
+import { B, Id, Rec, S, U } from 'h2o-wave'
+import React from 'react'
+import { stylesheet } from 'typestyle'
+import { AnnotatorTags } from './text_annotator'
+import { clas, cssVar, cssVarValue, px } from './theme'
+import { wave } from './ui'
+
+/** Create a rectangular annotation shape. */
+interface ImageAnnotatorRect {
+  /** `x` coordinate of the rectangle's corner. */
+  x1: U
+  /** `y` coordinate of the rectangle's corner. */
+  y1: U
+  /** `x` coordinate of the diagonally opposite corner. */
+  x2: U
+  /** `y` coordinate of the diagonally opposite corner. */
+  y2: U
+}
+
+/** Create a shape to be rendered as an annotation on an image annotator. */
+interface ImageAnnotatorShape {
+  rect?: ImageAnnotatorRect
+}
+
+/** Create a unique tag type for use in an image annotator. */
+interface ImageAnnotatorTag {
+  /** An identifying name for this tag. */
+  name: Id
+  /** Text to be displayed for the annotation. */
+  label: S
+  /** Hex or RGB color string to be used as the background color. */
+  color: S
+}
+
+/** Create an annotator item with initial selected tags or no tag for plaintext. */
+interface ImageAnnotatorItem {
+  /** The annotation shape. */
+  shape: ImageAnnotatorShape
+  /** The `name` of the image annotator tag to refer to for the `label` and `color` of this item. */
+  tag: S
+}
+
+/**
+ * Create an image annotator component.
+ * 
+ * This component allows annotating and labeling parts of an image by drawing shapes with a pointing device.
+ */
+export interface ImageAnnotator {
+  /** An identifying name for this component. */
+  name: Id
+  /** The path or URL of the image to be presented for annotation. */
+  image: S
+  /** The image annotator's title. */
+  title: S
+  /** The master list of tags that can be used for annotations. */
+  tags: ImageAnnotatorTag[]
+  /** Annotations to display on the image, if any. */
+  items?: ImageAnnotatorItem[]
+  /** True if the form should be submitted as soon as an annotation is drawn. */
+  trigger?: B
+  /** The card’s image height. The actual image size is used by default. */
+  image_height?: S
+}
+
+type Position = {
+  x: U
+  y: U
+  dragging?: B
+}
+
+type DrawnShape = ImageAnnotatorItem & {
+  isFocused?: B
+}
+
+const
+  css = stylesheet({
+    title: {
+      color: cssVar('$primary'),
+      marginBottom: 8
+    },
+    canvas: {
+      display: 'block',
+      margin: '0 auto',
+      cursor: 'crosshair',
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0
+    },
+    canvasContainer: {
+      position: 'relative',
+      margin: 8
+    }
+  }),
+  ARC_RADIUS = 4,
+  isIntersectingRect = (cursor_x: U, cursor_y: U, rect?: ImageAnnotatorRect) => {
+    if (!rect) return false
+    const
+      { x2, x1, y2, y1 } = rect,
+      x_min = Math.min(x1, x2),
+      x_max = Math.max(x1, x2),
+      y_min = Math.min(y1, y2),
+      y_max = Math.max(y1, y2)
+
+    return cursor_x > x_min && cursor_x < x_max && cursor_y > y_min && cursor_y < y_max
+  },
+  eventToCursor = (event: React.MouseEvent, rect: DOMRect) => ({ cursor_x: event.clientX - rect.left, cursor_y: event.clientY - rect.top }),
+  drawCircle = (ctx: CanvasRenderingContext2D, x: U, y: U, fillColor: S) => {
+    ctx.beginPath()
+    ctx.fillStyle = fillColor
+    const path = new Path2D()
+    path.arc(x, y, ARC_RADIUS, 0, 2 * Math.PI)
+    ctx.fill(path)
+    ctx.closePath()
+  },
+  drawRect = (ctx: CanvasRenderingContext2D, { x1, x2, y1, y2 }: ImageAnnotatorRect, strokeColor: S, isFocused = false) => {
+    ctx.beginPath()
+    ctx.lineWidth = 3
+    ctx.strokeStyle = strokeColor
+    ctx.strokeRect(x1, y1, x2 - x1, y2 - y1)
+    ctx.closePath()
+    if (isFocused) {
+      ctx.beginPath()
+      ctx.fillStyle = 'rgba(0, 0, 0, 0.3)'
+      ctx.fillRect(x1, y1, x2 - x1, y2 - y1)
+      ctx.closePath()
+      drawCircle(ctx, x1, y1, strokeColor)
+      drawCircle(ctx, x2, y1, strokeColor)
+      drawCircle(ctx, x2, y2, strokeColor)
+      drawCircle(ctx, x1, y2, strokeColor)
+    }
+  },
+  getCorner = (x: U, y: U, { x1, y1, x2, y2 }: ImageAnnotatorRect, ignoreMaxMin = false) => {
+    const
+      x_min = ignoreMaxMin ? x1 : Math.min(x1, x2),
+      x_max = ignoreMaxMin ? x2 : Math.max(x1, x2),
+      y_min = ignoreMaxMin ? y1 : Math.min(y1, y2),
+      y_max = ignoreMaxMin ? y2 : Math.max(y1, y2)
+    if (x > x_min - ARC_RADIUS && x < x_min + ARC_RADIUS && y > y_min - ARC_RADIUS && y < y_min + ARC_RADIUS) return 'topLeft'
+    else if (x > x_min - ARC_RADIUS && x < x_min + ARC_RADIUS && y > y_max - ARC_RADIUS && y < y_max + ARC_RADIUS) return 'topRight'
+    else if (x > x_max - ARC_RADIUS && x < x_max + ARC_RADIUS && y > y_min - ARC_RADIUS && y < y_min + ARC_RADIUS) return 'bottomLeft'
+    else if (x > x_max - ARC_RADIUS && x < x_max + ARC_RADIUS && y > y_max - ARC_RADIUS && y < y_max + ARC_RADIUS) return 'bottomRight'
+  },
+  getCornerCursor = (shape: ImageAnnotatorRect, cursor_x: U, cursor_y: U) => {
+    const corner = getCorner(cursor_x, cursor_y, shape)
+    if (corner === 'topLeft' || corner === 'bottomRight') return 'nwse-resize'
+    if (corner === 'bottomLeft' || corner === 'topRight') return 'nesw-resize'
+  },
+  getCorrectCursor = (drawnShapes: DrawnShape[], cursor_x: U, cursor_y: U, focused?: DrawnShape) => {
+    const intersected = drawnShapes.find(shape => isIntersectingRect(cursor_x, cursor_y, shape.shape.rect))
+    if (intersected?.isFocused && intersected.shape.rect) return getCornerCursor(intersected.shape.rect, cursor_x, cursor_y) || 'move'
+    else if (focused?.shape.rect) return getCornerCursor(focused.shape.rect, cursor_x, cursor_y) || 'crosshair'
+    else if (intersected) return 'pointer'
+    return 'crosshair'
+  }
+
+export const XImageAnnotator = ({ model }: { model: ImageAnnotator }) => {
+  const
+    colorsMap = React.useMemo(() => new Map<S, S>(model.tags.map(tag => [tag.name, cssVarValue(tag.color)])), [model.tags]),
+    [activeTag, setActiveTag] = React.useState<S>(model.tags[0]?.name || ''),
+    [drawnShapes, setDrawnShapes] = React.useState<DrawnShape[]>([]),
+    imgRef = React.useRef<HTMLCanvasElement>(null),
+    canvasRef = React.useRef<HTMLCanvasElement>(null),
+    [aspectRatio, setAspectRatio] = React.useState(1),
+    startPosition = React.useRef<Position | undefined>(undefined),
+    ctxRef = React.useRef<CanvasRenderingContext2D | undefined | null>(undefined),
+    resizedCornerRef = React.useRef<S | undefined>(undefined),
+    activateTag = React.useCallback((tagName: S) => () => setActiveTag(tagName), [setActiveTag]),
+    redrawExistingShapes = React.useCallback(() => {
+      const canvas = canvasRef.current
+      const ctx = ctxRef.current
+      if (!ctx || !canvas) return
+
+      ctx.clearRect(0, 0, canvas.width, canvas.height)
+      setDrawnShapes(shapes => {
+        shapes.forEach(item => {
+          if (item.shape.rect) drawRect(ctx, item.shape.rect, colorsMap.get(item.tag) || cssVarValue('$red'), item.isFocused)
+        })
+        return shapes
+      })
+    }, [colorsMap]),
+    onMouseDown = (e: React.MouseEvent) => {
+      const canvas = canvasRef.current
+      if (!canvas) return
+
+      const
+        { cursor_x, cursor_y } = eventToCursor(e, canvas.getBoundingClientRect()),
+        focused = drawnShapes.find(({ isFocused }) => isFocused)
+
+      if (focused?.shape.rect) resizedCornerRef.current = getCorner(cursor_x, cursor_y, focused.shape.rect, true)
+      startPosition.current = { x: cursor_x, y: cursor_y }
+    },
+    onMouseMove = (e: React.MouseEvent) => {
+      const
+        canvas = canvasRef.current,
+        ctx = ctxRef.current
+      if (!canvas || !ctx) return
+
+      const
+        { cursor_x, cursor_y } = eventToCursor(e, canvas.getBoundingClientRect()),
+        focused = drawnShapes.find(({ isFocused }) => isFocused),
+        clickStartPosition = startPosition.current
+      if (clickStartPosition) {
+        clickStartPosition.dragging = true
+        const intersected = drawnShapes.find(shape => isIntersectingRect(cursor_x, cursor_y, shape.shape.rect))
+        if (focused?.shape.rect && resizedCornerRef.current) {
+          if (resizedCornerRef.current === 'topLeft') {
+            focused.shape.rect.x1 += cursor_x - clickStartPosition.x
+            focused.shape.rect.y1 += cursor_y - clickStartPosition.y
+          }
+          else if (resizedCornerRef.current === 'topRight') {
+            focused.shape.rect.x1 += cursor_x - clickStartPosition.x
+            focused.shape.rect.y2 += cursor_y - clickStartPosition.y
+          }
+          else if (resizedCornerRef.current === 'bottomLeft') {
+            focused.shape.rect.x2 += cursor_x - clickStartPosition.x
+            focused.shape.rect.y1 += cursor_y - clickStartPosition.y
+          }
+          else if (resizedCornerRef.current === 'bottomRight') {
+            focused.shape.rect.x2 += cursor_x - clickStartPosition.x
+            focused.shape.rect.y2 += cursor_y - clickStartPosition.y
+          }
+          startPosition.current = { x: cursor_x, y: cursor_y }
+          redrawExistingShapes()
+        }
+        else if (intersected?.isFocused && intersected.shape.rect) {
+          canvas.style.cursor = 'move'
+          intersected.shape.rect.x1 += cursor_x - clickStartPosition.x
+          intersected.shape.rect.x2 += cursor_x - clickStartPosition.x
+          intersected.shape.rect.y1 += cursor_y - clickStartPosition.y
+          intersected.shape.rect.y2 += cursor_y - clickStartPosition.y
+          startPosition.current = { x: cursor_x, y: cursor_y }
+          redrawExistingShapes()
+        }
+        else {
+          setDrawnShapes(shapes => shapes.map(shape => ({ ...shape, isFocused: false })))
+          redrawExistingShapes()
+          drawRect(ctx, { x1: clickStartPosition.x, x2: cursor_x, y1: clickStartPosition.y, y2: cursor_y, }, colorsMap.get(activeTag) || cssVarValue('$red'))
+        }
+      }
+      else {
+        canvas.style.cursor = getCorrectCursor(drawnShapes, cursor_x, cursor_y, focused)
+      }
+    },
+    onClick = (e: React.MouseEvent) => {
+      const canvas = canvasRef.current
+      if (!canvas) return
+
+      const
+        start = startPosition.current,
+        rect = canvas.getBoundingClientRect(),
+        { cursor_x, cursor_y } = eventToCursor(e, rect),
+        newShapes = [...drawnShapes]
+
+      if (start) {
+        const { x1, x2, y1, y2 } = { x1: start.x, x2: cursor_x, y1: start.y, y2: cursor_y }
+        if (x2 !== x1 && y2 !== y1) newShapes.unshift({ shape: { rect: { x1, x2, y1, y2 } }, tag: activeTag })
+      }
+
+      if (!resizedCornerRef.current && !start?.dragging) {
+        newShapes.forEach(shape => shape.isFocused = false)
+        const intersecting = drawnShapes.find(shape => isIntersectingRect(cursor_x, cursor_y, shape.shape.rect))
+        if (intersecting) intersecting.isFocused = true
+      }
+
+      startPosition.current = undefined
+      resizedCornerRef.current = ''
+      canvas.style.cursor = getCorrectCursor(newShapes, cursor_x, cursor_y, newShapes.find(({ isFocused }) => isFocused))
+      setDrawnShapes(newShapes)
+      redrawExistingShapes()
+    },
+    remove = (_e?: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>, item?: Fluent.IContextualMenuItem) => {
+      if (!item) return
+      setDrawnShapes(shapes => item.key === 'remove-selected' ? shapes.filter(s => !s.isFocused) : [])
+      redrawExistingShapes()
+    }
+
+  React.useEffect(() => {
+    const img = new Image()
+    img.src = model.image
+    img.onload = () => {
+      const imgCanvas = imgRef.current
+      const canvas = canvasRef.current
+      if (!imgCanvas || !canvas) return
+      ctxRef.current = canvas.getContext('2d')
+
+      const ctx = imgCanvas.getContext('2d')
+      if (!ctx) return
+
+      const height = model.image_height ? +model.image_height.replace('px', '') : img.naturalHeight
+      const aspectRatio = height / img.naturalHeight
+      setAspectRatio(aspectRatio)
+      imgCanvas.height = height
+      imgCanvas.width = img.naturalWidth * aspectRatio
+      canvas.height = height
+      canvas.width = img.naturalWidth * aspectRatio
+      canvas.style.zIndex = '1'
+      canvas.parentElement!.style.height = px(height)
+
+      ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, img.width * aspectRatio, img.height * aspectRatio)
+      setDrawnShapes((model.items || []).map(({ tag, shape }) => {
+        if (shape.rect) return {
+          tag,
+          shape: {
+            rect: {
+              x1: shape.rect.x1 * aspectRatio,
+              x2: shape.rect.x2 * aspectRatio,
+              y1: shape.rect.y1 * aspectRatio,
+              y2: shape.rect.y2 * aspectRatio,
+            }
+          }
+        }
+        return { tag, shape }
+      }))
+      redrawExistingShapes()
+    }
+  }, [model.name, model.image, model.image_height, redrawExistingShapes, model.items])
+
+  React.useEffect(() => {
+    wave.args[model.name] = drawnShapes.map(({ tag, shape }) => {
+      if (shape.rect) return {
+        tag,
+        shape: {
+          rect: {
+            x1: shape.rect.x1 / aspectRatio,
+            x2: shape.rect.x2 / aspectRatio,
+            y1: shape.rect.y1 / aspectRatio,
+            y2: shape.rect.y2 / aspectRatio,
+          }
+        }
+      }
+      return { tag, shape }
+    }) as unknown as Rec[]
+  }, [aspectRatio, drawnShapes, model.name])
+
+  return (
+    <div data-test={model.name}>
+      <div className={clas('wave-s16 wave-w6', css.title)}>{model.title}</div>
+      <AnnotatorTags tags={model.tags} activateTag={activateTag} activeTag={activeTag} />
+      <Fluent.CommandBar styles={{ root: { padding: 0 } }} items={[
+        {
+          key: 'remove-selected',
+          text: 'Remove selection',
+          onClick: remove,
+          disabled: drawnShapes.every(s => !s.isFocused),
+          iconProps: { iconName: 'RemoveContent', styles: { root: { fontSize: 20 } } },
+        },
+        {
+          key: 'remove-all',
+          text: 'Remove all',
+          onClick: remove,
+          disabled: drawnShapes.length === 0,
+          iconProps: { iconName: 'DependencyRemove', styles: { root: { fontSize: 20 } } },
+        },
+      ]} />
+      <div className={css.canvasContainer}>
+        <canvas ref={imgRef} className={css.canvas} />
+        <canvas ref={canvasRef} className={css.canvas} onMouseMove={onMouseMove} onMouseDown={onMouseDown} onClick={onClick} />
+      </div>
+    </div >
+  )
+}
\ No newline at end of file
diff --git a/ui/src/text_annotator.tsx b/ui/src/text_annotator.tsx
index 6e539f033d..08a0be1aec 100644
--- a/ui/src/text_annotator.tsx
+++ b/ui/src/text_annotator.tsx
@@ -19,7 +19,7 @@ interface TextAnnotatorTag {
 interface TextAnnotatorItem {
   /** Text to be highlighted. */
   text: S
-  /** Tag connected to the highlighted text. */
+  /** The `name` of the text annotator tag to refer to for the `label` and `color` of this item. */
   tag?: S
 }
 
@@ -105,134 +105,141 @@ const css = stylesheet({
   readonly: { pointerEvents: 'none' }
 })
 
-export const XTextAnnotator = ({ model }: { model: TextAnnotator }) => {
-  const
-    [startIdx, setStartIdx] = React.useState<U | null>(null),
-    [activeTag, setActiveTag] = React.useState<S | undefined>(model.readonly ? undefined : model.tags[0]?.name),
-    [hoveredTagIdx, setHoveredTagIdx] = React.useState<U | null>(),
-    tagColorMap = model.tags.reduce((map, t) => {
-      map.set(t.name, t.color)
-      return map
-    }, new Map<S, S>()),
-    [tokens, setTokens] = React.useState(model.items.reduce((arr, { text, tag }) => {
-      // Split by any non-letter character.
-      text.split(/(?=[^A-Za-z])/g).forEach(textItem => {
-        if (textItem.startsWith(' ')) {
-          arr.push({ text: ' ', tag })
-          arr.push({ text: textItem.substring(1), tag })
-        } else {
-          arr.push({ text: textItem, tag })
-        }
-      })
-      return arr
-    }, [] as TextAnnotatorItem[])),
-    submitWaveArgs = () => {
-      let currentText = ''
-      let currentTag: S | undefined
-      wave.args[model.name] = tokens.reduce((arr, { text, tag }, idx, tokens) => {
-        if (idx === tokens.length - 1) {
-          if (tag !== currentTag) {
-            arr.push({ text: currentText, tag: currentTag })
-            arr.push({ text, tag })
-          }
-          else {
-            arr.push({ text: currentText + text, tag })
+export
+  const AnnotatorTags = ({ tags, activateTag, activeTag }: { tags: TextAnnotatorTag[], activateTag: (name: S) => () => void, activeTag?: S }) => (
+    <div className={css.tags}>
+      {
+        tags.map(({ name, color, label }) => {
+          const style = stylesheet({
+            tag: {
+              background: cssVar(color),
+              color: getContrast(color),
+            },
+            activeTag: {
+              border: border(2, cssVar('$themePrimary')),
+              borderRadius: 6
+            }
+          })
+          return (
+            <div key={name} data-test={name} className={clas(css.tagWrapper, activeTag === name ? style.activeTag : '')}>
+              <div className={clas(css.tag, style.tag, 'wave-s12')} onClick={activateTag(name)}>{label}</div>
+            </div>
+          )
+        })
+      }
+    </div>
+  ),
+  XTextAnnotator = ({ model }: { model: TextAnnotator }) => {
+    const
+      [startIdx, setStartIdx] = React.useState<U | null>(null),
+      [activeTag, setActiveTag] = React.useState<S | undefined>(model.readonly ? undefined : model.tags[0]?.name),
+      [hoveredTagIdx, setHoveredTagIdx] = React.useState<U | null>(),
+      tagColorMap = model.tags.reduce((map, t) => {
+        map.set(t.name, t.color)
+        return map
+      }, new Map<S, S>()),
+      [tokens, setTokens] = React.useState(model.items.reduce((arr, { text, tag }) => {
+        // Split by any non-letter character.
+        text.split(/(?=[^A-Za-z])/g).forEach(textItem => {
+          if (textItem.startsWith(' ')) {
+            arr.push({ text: ' ', tag })
+            arr.push({ text: textItem.substring(1), tag })
+          } else {
+            arr.push({ text: textItem, tag })
           }
-        }
-        else if (idx !== 0 && tag !== currentTag) {
-          arr.push({ text: currentText, tag: currentTag })
-          currentText = text
-        } else {
-          currentText += text
-        }
-        currentTag = tag
+        })
         return arr
-      }, [] as TextAnnotatorItem[]) as unknown as Rec[]
-      if (model.trigger) wave.push()
-    },
-    activateTag = (tagName: S) => () => setActiveTag(tagName),
-    removeAnnotation = (idx: U) => (ev: React.MouseEvent<HTMLSpanElement, MouseEvent>) => {
-      ev.stopPropagation() // Stop event bubbling so that annotate is not called.
-      const tagToRemove = tokens[idx].tag
-      for (let i = idx; tokens[i]?.tag === tagToRemove; i++) tokens[i].tag = undefined
-      setTokens([...tokens])
-      submitWaveArgs()
-    },
-    updateStartIdx = (startIdx: U) => () => setStartIdx(startIdx),
-    annotate = (end: U) => () => {
-      const start = startIdx
-      if (start === null) return
+      }, [] as TextAnnotatorItem[])),
+      submitWaveArgs = () => {
+        let currentText = ''
+        let currentTag: S | undefined
+        wave.args[model.name] = tokens.reduce((arr, { text, tag }, idx, tokens) => {
+          if (idx === tokens.length - 1) {
+            if (tag !== currentTag) {
+              arr.push({ text: currentText, tag: currentTag })
+              arr.push({ text, tag })
+            }
+            else {
+              arr.push({ text: currentText + text, tag })
+            }
+          }
+          else if (idx !== 0 && tag !== currentTag) {
+            arr.push({ text: currentText, tag: currentTag })
+            currentText = text
+          } else {
+            currentText += text
+          }
+          currentTag = tag
+          return arr
+        }, [] as TextAnnotatorItem[]) as unknown as Rec[]
+        if (model.trigger) wave.push()
+      },
+      activateTag = React.useCallback((tagName: S) => () => setActiveTag(tagName), [setActiveTag]),
+      removeAnnotation = (idx: U) => (ev: React.MouseEvent<HTMLSpanElement, MouseEvent>) => {
+        ev.stopPropagation() // Stop event bubbling so that annotate is not called.
+        const tagToRemove = tokens[idx].tag
+        for (let i = idx; tokens[i]?.tag === tagToRemove; i++) tokens[i].tag = undefined
+        setTokens([...tokens])
+        submitWaveArgs()
+      },
+      updateStartIdx = (startIdx: U) => () => setStartIdx(startIdx),
+      annotate = (end: U) => () => {
+        const start = startIdx
+        if (start === null) return
 
-      const max = Math.max(start, end)
-      for (let i = Math.min(start, end); i <= max; i++) tokens[i].tag = activeTag
+        const max = Math.max(start, end)
+        for (let i = Math.min(start, end); i <= max; i++) tokens[i].tag = activeTag
 
-      submitWaveArgs()
-      setStartIdx(null)
-      window.getSelection()?.removeAllRanges()
-    },
-    onMarkHover = (idx: U) => () => setHoveredTagIdx(idx),
-    onMarkMouseOut = () => setHoveredTagIdx(null),
-    shouldShowRemoveIcon = (idx: U, tag: S) => {
-      if (hoveredTagIdx === null) return false
-      // Check if same tag as hovered and first mark of an annotation.
-      if (tokens[hoveredTagIdx!]?.tag !== tag || tokens[idx - 1]?.tag === tag) return false
-      // Check if annotation consists of a single tag.
-      if (idx === hoveredTagIdx) return true
-      for (let i = idx; tokens[i]?.tag === tag; i++) if (i === hoveredTagIdx) return true
+        submitWaveArgs()
+        setStartIdx(null)
+        window.getSelection()?.removeAllRanges()
+      },
+      onMarkHover = (idx: U) => () => setHoveredTagIdx(idx),
+      onMarkMouseOut = () => setHoveredTagIdx(null),
+      shouldShowRemoveIcon = (idx: U, tag: S) => {
+        if (hoveredTagIdx === null) return false
+        // Check if same tag as hovered and first mark of an annotation.
+        if (tokens[hoveredTagIdx!]?.tag !== tag || tokens[idx - 1]?.tag === tag) return false
+        // Check if annotation consists of a single tag.
+        if (idx === hoveredTagIdx) return true
+        for (let i = idx; tokens[i]?.tag === tag; i++) if (i === hoveredTagIdx) return true
 
-      return false
-    },
-    getMark = (text: S, idx: U, tag: S) => {
-      const
-        color = tagColorMap.get(tag)!,
-        removeIconStyle = { visibility: shouldShowRemoveIcon(idx, tag) ? 'visible' : 'hidden' },
-        isFirst = tokens[idx - 1]?.tag !== tag,
-        isLast = tokens[idx + 1]?.tag !== tag
-      return (
-        <mark
-          onMouseOver={onMarkHover(idx)}
-          onMouseOut={onMarkMouseOut}
-          className={clas(css.mark, isFirst ? css.firstMark : '', isLast ? css.lastMark : '')}
-          style={{ backgroundColor: cssVar(color), color: getContrast(color) }}>
-          {text}
-          <Fluent.Icon iconName='CircleAdditionSolid' styles={{ root: removeIconStyle }} className={clas(css.removeIcon, 'wave-w6')} onMouseUp={removeAnnotation(idx)} />
-          {/* HACK: Put color underlay under remove icon because its glyph is transparent and doesn't look good on tags. */}
-          <span style={removeIconStyle as React.CSSProperties} className={css.iconUnderlay}></span>
-        </mark>
-      )
-    },
-    tags = model.tags.map(({ name, color, label }) => {
-      const style = stylesheet({
-        tag: {
-          background: cssVar(color),
-          color: getContrast(color),
-          cursor: model.readonly ? 'default' : 'pointer',
-        },
-        activeTag: {
-          border: border(2, cssVar('$themePrimary')),
-          borderRadius: 6
-        }
-      })
-      return (
-        <div key={name} data-test={name} className={clas(css.tagWrapper, activeTag === name ? style.activeTag : '')}>
-          <div className={clas(css.tag, style.tag, 'wave-s12')} onClick={activateTag(name)}>{label}</div>
-        </div>
-      )
-    })
+        return false
+      },
+      getMark = (text: S, idx: U, tag: S) => {
+        const
+          color = tagColorMap.get(tag)!,
+          removeIconStyle = { visibility: shouldShowRemoveIcon(idx, tag) ? 'visible' : 'hidden' },
+          isFirst = tokens[idx - 1]?.tag !== tag,
+          isLast = tokens[idx + 1]?.tag !== tag
+        return (
+          <mark
+            onMouseOver={onMarkHover(idx)}
+            onMouseOut={onMarkMouseOut}
+            className={clas(css.mark, isFirst ? css.firstMark : '', isLast ? css.lastMark : '')}
+            style={{ backgroundColor: cssVar(color), color: getContrast(color) }}>
+            {text}
+            <Fluent.Icon iconName='CircleAdditionSolid' styles={{ root: removeIconStyle }} className={clas(css.removeIcon, 'wave-w6')} onMouseUp={removeAnnotation(idx)} />
+            {/* HACK: Put color underlay under remove icon because its glyph is transparent and doesn't look good on tags. */}
+            <span style={removeIconStyle as React.CSSProperties} className={css.iconUnderlay}></span>
+          </mark>
+        )
+      }
 
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  React.useEffect(() => { wave.args[model.name] = model.items as unknown as Rec[] }, [])
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    React.useEffect(() => { wave.args[model.name] = model.items as unknown as Rec[] }, [])
 
-  return (
-    <div data-test={model.name} className={model.readonly ? css.readonly : ''}>
-      <div className={clas('wave-s16 wave-w6', css.title)}>{model.title}</div>
-      <div className={css.tags}>{tags}</div>
-      <div className={clas(css.content, 'wave-s16 wave-t7 wave-w3')}>{
-        tokens.map(({ text, tag }, idx) => (
-          <span key={idx} onMouseDown={updateStartIdx(idx)} onMouseUp={annotate(idx)}>{tag ? getMark(text, idx, tag) : text}</span>
-        ))
-      }
+    return (
+      <div data-test={model.name} className={model.readonly ? css.readonly : ''}>
+        <div className={clas('wave-s16 wave-w6', css.title)}>{model.title}</div>
+        <AnnotatorTags tags={model.tags} activateTag={activateTag} activeTag={activeTag} />
+        <div className={clas(css.content, 'wave-s16 wave-t7 wave-w3')}>
+          {
+            tokens.map(({ text, tag }, idx) => (
+              <span key={idx} onMouseDown={updateStartIdx(idx)} onMouseUp={annotate(idx)}>{tag ? getMark(text, idx, tag) : text}</span>
+            ))
+          }
+        </div>
       </div>
-    </div>
-  )
-}
\ No newline at end of file
+    )
+  }
\ No newline at end of file
diff --git a/website/sidebars.js b/website/sidebars.js
index 253283b8eb..9a1373bc3a 100644
--- a/website/sidebars.js
+++ b/website/sidebars.js
@@ -112,6 +112,7 @@ module.exports = {
           "widgets/form/file_upload",
           "widgets/form/frame",
           "widgets/form/image",
+          "widgets/form/image_annotator",
           "widgets/form/inline",
           "widgets/form/label",
           "widgets/form/link",
diff --git a/website/widgets/form/image_annotator.md b/website/widgets/form/image_annotator.md
new file mode 100644
index 0000000000..ba8b5a4e95
--- /dev/null
+++ b/website/widgets/form/image_annotator.md
@@ -0,0 +1,29 @@
+---
+title: Image Annotator
+keywords:
+  - form
+  - image_annotator
+custom_edit_url: null
+---
+
+Use image annotator when you need to draw bounding boxes over an image. Useful for computer vision.
+
+```py
+image = 'https://images.pexels.com/photos/2696064/pexels-photo-2696064.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1'
+q.page['example'] = ui.form_card(box='1 1 9 10', items=[
+    ui.image_annotator(
+        name='annotator',
+        title='Drag to annotate',
+        image=image,
+        image_height='700px',
+        tags=[
+            ui.image_annotator_tag(name='p', label='Person', color='$cyan'),
+            ui.image_annotator_tag(name='f', label='Food', color='$blue'),
+        ],
+        items=[
+            ui.image_annotator_item(shape=ui.image_annotator_rect(x1=649, y1=393, x2=383, y2=25), tag='p'),
+        ],
+    ),
+    ui.button(name='submit', label='Submit', primary=True)
+])
+```