Image Annotator
Pin numbered comments on an image with a draft pin and composer, a synced comment list, resolve/reopen, and keyboard navigation between pins.
Preview
↵ to post
Comments 3 open
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| image | ReactNode | — | The picture to review: a drawn SVG or an <img> that fills its box. |
| alt | string | — | Text alternative for the picture. |
| aspect | number | 16 / 10 | Width / height of the image box. |
| annotations | Annotation[] | — | Controlled comments: { id, x, y (percent), text, author, time?, resolved? }. |
| defaultAnnotations | Annotation[] | [] | Initial comments. |
| onAnnotationsChange | (next: Annotation[]) => void | — | Called when a comment is added, resolved or reopened. |
| author | string | "You" | Author name for new comments. |
| defaultDraft | { x, y, text? } | null | null | Open a draft pin at first render (for docs). |
| defaultSelected | string | null | null | Initially selected comment id. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.