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.
The Application Collection unlocks the source for every Application block. All Access unlocks every Collection.
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.