Image Annotation Editor

Draw rectangles and polygons on images, tag labels, and export to COCO / YOLO format.

100% local processing — images and annotations never leave your browser.

The visual editor and JSON editor stay in real-time sync — every change is instantly reflected in both.

Tips

🖱️

Drawing Rectangles

Select the Rectangle tool, then click and drag on the canvas. The bounding box snaps to image boundaries automatically.

⬠

Drawing Polygons

Select the Polygon tool and click to place vertices. Press Enter or double-click the first point to close the shape. Escape cancels.

✏️

Editing Shapes

In Select mode, click a shape to select it. Drag corner handles to resize rectangles, or drag vertex handles to reshape polygons. Drag inside the shape to move it.

⌨️

Keyboard Shortcuts

Ctrl+Z / Ctrl+Shift+Z for undo/redo. Delete or Backspace to remove selected. Escape to deselect. Enter to finish polygon.

🔍

Zoom & Pan

Mouse wheel to zoom in/out. Middle-click drag or hold Space and drag to pan. Use Fit to auto-fit the image, Reset to return to 1:1.

🏷️

Labels & Notes

Select an annotation and edit its Label and Note in the sidebar. Labels are used as category names in COCO and YOLO exports. Unlabeled annotations export as "unlabeled".

📋

Native JSON Format

The native JSON preserves all data (labels, notes, colors, exact coordinates) and can be re-imported later. Use this to save and resume your work.

🤖

COCO JSON Format

COCO JSON is the standard for object detection datasets (used by Detectron2, MMDetection, etc.). Rectangles export as both bbox and polygon segmentation. Ideal for training and evaluation.

📐

YOLO BBox Format

YOLO BBox outputs one text file with normalized center-x, center-y, width, height per line, plus a classes.txt. Used by YOLOv5/v8/v9 for object detection training.

🔷

YOLO Segmentation Format

YOLO Segmentation outputs normalized polygon vertices per line, plus a classes.txt. Used by YOLOv8-seg and later for instance segmentation training.

🔄

Real-Time JSON Sync

The visual editor and the JSON editor below stay in sync. Edit coordinates or labels in either place — changes reflect instantly in both directions.

📁

File Naming Convention

Exported files are named after the source image: {name}_annotations.json, {name}_coco.json, {name}_yolo_bbox.txt, {name}_yolo_seg.txt, with matching _classes.txt files.

Frequently Asked Questions

Is my image uploaded to a server?
No. All processing happens entirely in your browser using JavaScript. Your images, annotations, and exported files never leave your device.
Which export format should I use for object detection?
For PyTorch-based frameworks (Detectron2, MMDetection, DETR), use COCO JSON. For Ultralytics YOLOv5/v8/v9, use YOLO BBox. Both contain bounding box information optimized for their respective frameworks.
Which format should I use for instance segmentation?
For pixel-level segmentation with polygon masks, use COCO JSON (supported by Mask R-CNN, Detectron2). For YOLOv8-seg, use YOLO Segmentation which exports normalized polygon vertices.
What is the difference between YOLO BBox and YOLO Segmentation?
YOLO BBox exports axis-aligned bounding boxes only (center_x, center_y, width, height). YOLO Segmentation exports the actual polygon vertices, preserving the precise shape outline. Both use normalized 0-1 coordinates.
Can I import existing annotations?
Yes. Use the Import button to load a native JSON file previously exported from this tool. The image dimensions in the file must match the currently loaded image.
How are unlabeled annotations handled in exports?
Annotations without a label are exported with the category name "unlabeled" in COCO and YOLO formats. It is recommended to add meaningful labels before exporting for training.
How does undo/redo work with drag operations?
Drag operations (moving shapes, resizing rectangles, editing polygon vertices) are grouped into a single undo step. One Ctrl+Z undoes the entire drag, not each intermediate position.
What image formats are supported?
PNG, JPEG, and WebP images can be loaded. The image is displayed on an HTML canvas — very large images (e.g. 8000×6000) may feel slower on low-end devices.
Can I annotate multiple images at once?
This tool works on one image at a time. Export your annotations, then load the next image. For batch annotation workflows, consider combining exported files into a dataset using a script.
Do the YOLO files include a classes.txt?
Yes. Both YOLO BBox and YOLO Segmentation export two files: the annotation file ({name}_yolo_bbox.txt or {name}_yolo_seg.txt) and a corresponding classes file ({name}_yolo_bbox_classes.txt or {name}_yolo_seg_classes.txt).