Image Annotation | Zyeon UI

Preview in your theme

Design review — click the mockup to drop a pin, drag pins to move them, click a pin to write a note. The panel on the right is the controlled value.

Wireframe of a marketing landing page under design review

Loading image…

4 pins

value (controlled)

14.4%, 4.5% Logo sits 4px off the baseline grid.
289.8%, 4.5% CTA should say “Start free”, not “Sign up”.
373.4%, 31% Swap in the new product shot (v3).
420%, 77.5% Card copy wraps to 3 lines at 1280px.

readOnly — pins stay focusable and open a read-only bubble; nothing can be added, moved or deleted.

Landing page wireframe with four read-only review notes

Loading image…

4 pinsRead-only — open a pin to read its note.

maxPins={3} plus a portrait image in a 16:9 frame — the limit blocks new pins, and coordinates are stored against the picture, so pins ignore the letterbox bars.

Loading image…

3 / 3 pins

Broken source — a skeleton while loading, then an error placeholder with a working Retry (never a broken-image icon).

Loading image…

0 pins

Loading preview…

This component is part of Pro

The install command, prompt and concept map are included with a Pro license — one purchase unlocks every Pro component, forever.

Unlock with Pro