Annotation Demo

Compose the Overlay and Annotation Foundations with focused Text, Shape, Draw, History, and Canvas Interactions Plugins for screenshot and document review.

Image upload

Layout mode

Text

Color Size

Shape

Stroke Width

Fill

Draw

Color Brush

Eraser

No image loaded

Load the sample screenshot or upload an image to start marking up.

Editor State

ImageEmpty

ToolNone

Annotations0

SelectionNone

UndoNo

Last operationNone

Annotations

VisibilityNo selection

LockNo selection

Layer order

Export

Format Quality

Include overlays in export

No export yet.

Save last export

Public APIs Used

new ImageEditor.ImageEditorCore() ImageEditor.composePlugins() ImageEditorPlugins.Overlay.overlayFoundationPlugin() ImageEditorPlugins.Annotation.annotationFoundationPlugin() ImageEditorPlugins.AnnotationText.textAnnotationPlugin() ImageEditorPlugins.AnnotationShape.shapeAnnotationPlugin() ImageEditorPlugins.AnnotationDraw.drawAnnotationPlugin() ImageEditorPlugins.History.historyPlugin() ImageEditorPlugins.CanvasInteractions.canvasInteractionsPlugin() editor.loadImageFile() editor.observeContainer() editor.subscribeStatus() plugins.text.create() plugins.text.update() plugins.shape.create() plugins.shape.enter() plugins.shape.configure() plugins.draw.enter() plugins.draw.setSubMode() plugins.draw.configureEraser() plugins.canvasInteractions.cancel() plugins.annotations.update() plugins.annotations.remove() plugins.overlays.bringForward() plugins.annotations.flatten() editor.exportImageBase64()