Canvas Pin Comments
Design canvas mockup with four numbered comment pins and a side rail listing each pin thread with author, note, and resolve actions.
Design canvas mockup with four numbered comment pins and a side rail listing each pin thread with author, note, and resolve actions.
Search blocks by description or jump to a page.
The source for every Application block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Canvas Pin Comments is the Figma-style spatial comment surface: a Homepage v3 design frame rendered as an inline SVG mockup with four numbered pins dropped on the regions they reference. Maya Chen flags the stale headline, Jordan Lee (the active pin) points out the v2 illustration export, Priya Nair questions the two primary looking buttons, and Noah Park catches the middle card overflowing at 1280. A side rail lists each pin as a thread with number, avatar, author, timestamp, note, reply count, and Reply and Resolve actions.
Pins are one typed array, positioned on the canvas with percentage x and y offsets so they float over the frame at any size. The active flag lights the pin and its rail entry together, keeping the render branch simple. The footer note tells users a click drops a new pin and that pins keep their place when the frame moves or resizes.
Reach for this block as the spatial comment layer of any design canvas or visual review tool, wired to your pin endpoint and cursor position. Bind the canvas click to your create-pin mutation and Resolve to your thread-close call.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the homepage design review. Other pinned canvas configurations:
Tip: the paired highlight between a pin and its rail entry is what makes the surface readable, keep the active state driving both so reviewers never lose which thread is which.