Inline Annotation Thread
Highlighted text excerpt with an attached margin thread showing two comments, a reply composer, emoji reactions, and resolve and delete controls.
Highlighted text excerpt with an attached margin thread showing two comments, a reply composer, emoji reactions, and resolve and delete controls.
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
Inline Annotation Thread is the Figma and Google Docs-style margin comment: a sentence in the Acme API reference highlighted in amber, and beside it a 272-wide thread card with Maya Chen calling the wording ambiguous for first-time readers, Jordan Lee agreeing and tagging Avery Stone, a reaction row with three emoji chips (the thumbs up active, showing you already reacted), a reply composer as Avery Stone, and a Resolve button in the footer.
Comments are one array, reactions a separate typed array with an active flag steering the aria-pressed state and the chip highlight. The composer renders open as static markup rather than a Radix Popover so it stays inside the preview root and screenshots correctly.
Reach for this block wherever a reader can annotate a specific span of text, wired to your annotation endpoint and selection API. The highlighted mark tag needs a mouseup listener to create new threads; Resolve calls your thread-close mutation.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the REST reference annotation thread. Other annotation surfaces:
Tip: the emoji reaction row belongs on every thread panel, it absorbs the low-cost acknowledgements that would otherwise become one-line reply comments.