Documentation Index
Fetch the complete documentation index at: https://docs.velt.dev/llms.txt
Use this file to discover all available pages before exploring further.
Overview
The Reactions feature renders emoji reactions on annotations and on inline page content. Variables below are available inside any <velt-reaction-...-wireframe>, <velt-inline-reactions-section-...-wireframe>, or <velt-reactions-panel-...-wireframe> tag via three forms:
| You want to… | Use | Example |
|---|
| Display a value as text | <velt-data field="var" /> | <velt-data field="componentConfig.annotation.emoji" /> |
| Hide / show conditionally | velt-if="{var}" | velt-if="{componentConfig.tooltipVisible}" |
| Toggle a CSS class | velt-class="'cls': {var}" | velt-class="'is-mine': {componentConfig.isReactionSelectedByCurrentUser}" |
This feature uses the flat-config access pattern — variables are referenced via the explicit componentConfig.<path> form. Each primitive carries its own componentConfigSignal — the tool, the pin, and the inline-reactions section expose different variable sets (documented separately below).
<velt-reaction-tool> ”+” emoji-picker button.
| Variable | Type | Description | Example |
|---|
componentConfig.variant | string | Wireframe variant id. | <velt-data field="componentConfig.variant" /> |
componentConfig.onClickOutside | Function | Close handler — call from a click-outside region. | Call this from your custom dismiss handler. |
componentConfig.handleEmojiSelected | Function | Emoji-selection handler. Call with the chosen emoji string. | Call this from your custom emoji button click. |
componentConfig.excludeReactionIds | string[] | Reaction ids to hide from the picker. | <velt-data field="componentConfig.excludeReactionIds.length" /> |
Component Config — Reaction Pin
State on a single <velt-reaction-pin> (an emoji “pin” placed on the page or next to a comment).
| Variable | Type | Description | Example |
|---|
componentConfig.type | ReactionPinType | Pin variant ('comment', 'inline', etc.). | velt-class="'pin-{componentConfig.type}': true" |
componentConfig.annotationId | string | The reaction-annotation id this pin represents. | <velt-data field="componentConfig.annotationId" /> |
componentConfig.annotation | ReactionAnnotation | Full annotation object — from, emoji, users, createdAt, etc. | <velt-data field="componentConfig.annotation.emoji" /> |
componentConfig.disableTooltip | boolean | Hide the hover tooltip. | velt-if="!{componentConfig.disableTooltip}" |
componentConfig.customTooltipTemplate | TemplateRef<any> | Optional custom tooltip template (set programmatically via the [template] input — not used in wireframes). | Internal — programmatic only. |
componentConfig.isReactionSelectedByCurrentUser | boolean | Local user has reacted with this emoji. | velt-class="'is-mine': {componentConfig.isReactionSelectedByCurrentUser}" |
componentConfig.user | User | Currently identified end-user. | <velt-data field="componentConfig.user.name" /> |
componentConfig.tooltipVisible | boolean | Tooltip is currently open. | velt-class="'tooltip-on': {componentConfig.tooltipVisible}" |
componentConfig.shadowDom | boolean | Shadow-DOM rendering is enabled. | Host config — set via element attribute. |
componentConfig.variant | string | Wireframe variant id. | <velt-data field="componentConfig.variant" /> |
componentConfig.excludeReactionIds | string[] | Reaction ids to hide. | <velt-data field="componentConfig.excludeReactionIds.length" /> |
componentConfig.commentReactionAnnotationIds | string[] | When this pin lives next to a comment, the full list of reactions on the comment. | <velt-data field="componentConfig.commentReactionAnnotationIds.length" /> |
Component Config — Inline Reactions Section
State on the <velt-inline-reactions-section> — an inline strip of reactions for a target element.
| Variable | Type | Description | Example |
|---|
componentConfig.targetReactionElementId | string | Anchor element id. | <velt-data field="componentConfig.targetReactionElementId" /> |
componentConfig.annotations | ReactionAnnotation[] | Reactions placed on this target. | <velt-data field="componentConfig.annotations.length" /> |
componentConfig.user | User | null | Currently identified end-user. | <velt-data field="componentConfig.user.name" /> |
componentConfig.skeletonLoading | boolean | Skeleton loader is active. | velt-if="{componentConfig.skeletonLoading}" |
componentConfig.darkMode | boolean | Dark mode is active. | velt-class="'dark': {componentConfig.darkMode}" |
componentConfig.variant | string | Per-instance variant tag. | <velt-data field="componentConfig.variant" /> |
componentConfig.shadowDom | boolean | Shadow-DOM rendering is enabled. | Host config — set via element attribute. |
componentConfig.onEmojiSelected | (emoji: string) => void | Emoji-picked handler. | Call this from your custom emoji button click. |
componentConfig.onReactionClick | (reactionAnnotation: ReactionAnnotation) => void | Pin-click handler. | Call this from your custom pin click. |
componentConfig.reactionAnnotationsTrackByFn | Function | Identity function used internally to track list items. | Internal — used as a track-by function. |
Context-Specific Variables
These are only resolvable inside the nested wireframe tags noted in the Available in column. Each is injected by the iteration primitive that owns the tag.
| Variable | Type | Available in | Example |
|---|
user | User | Reaction-pin tooltip rows — <velt-reaction-pin-tooltip-user-wireframe> and its children | <velt-data field="user.name" /> |
emoji | { key: string; value: string; name?: string } | Reactions-panel rows — <velt-reactions-panel-item-wireframe> and <velt-reactions-panel-item-emoji-wireframe> | <velt-data field="emoji.value" /> |
isSelected | boolean | Reactions-panel rows — true for the currently-selected emoji. | velt-class="'is-selected': {isSelected}" |
Type Reference
Types referenced by the variables above are documented in Data Models:
| Type | Description |
|---|
User | Identified end-user object. |
ReactionPinType | Pin variant discriminator ('comment', 'inline', etc.). |
ReactionAnnotation | The reaction-annotation — from, emoji, users, createdAt. |
Subcomponents
Each subcomponent below has its own wireframe tag.
The ”+” emoji-picker button.
- Public element:
<velt-reaction-tool>
- Wireframe tag:
<velt-reaction-tool-wireframe>
| Property | Value |
|---|
| Extra variables | See Component Config — Reaction Tool. |
reaction-pin
A single placed emoji reaction.
- Public element:
<velt-reaction-pin>
- Wireframe tag:
<velt-reaction-pin-wireframe>
- Children:
*-pin-emoji, *-pin-count, *-pin-tooltip-users, *-pin-tooltip-user, *-pin-tooltip-user-avatar, *-pin-tooltip-user-name.
| Property | Value |
|---|
| Extra variables | See Component Config — Reaction Pin. |
React / Next.js
Other Frameworks
<VeltReactionPinWireframe
velt-class="'is-mine': {componentConfig.isReactionSelectedByCurrentUser}">
<button className="my-pin">
<span><velt-data field="componentConfig.annotation.emoji" /></span>
<span velt-if="{componentConfig.annotation.users.length} > 1">
<velt-data field="componentConfig.annotation.users.length" />
</span>
</button>
</VeltReactionPinWireframe>
<velt-reaction-pin-wireframe
velt-class="'is-mine': {componentConfig.isReactionSelectedByCurrentUser}">
<button class="my-pin">
<span><velt-data field="componentConfig.annotation.emoji"></velt-data></span>
<span velt-if="{componentConfig.annotation.users.length} > 1">
<velt-data field="componentConfig.annotation.users.length"></velt-data>
</span>
</button>
</velt-reaction-pin-wireframe>
inline-reactions-section
An inline strip of reactions placed next to a target element.
- Public element:
<velt-inline-reactions-section>
- Wireframe tag:
<velt-inline-reactions-section-wireframe>
- Children:
*-tool-container, *-panel, *-list.
Children
| Wireframe tag | Notes |
|---|
<velt-inline-reactions-section-tool-container-wireframe> | Wraps the emoji-picker tool. |
<velt-inline-reactions-section-panel-wireframe> | Panel wrapper that hosts the reaction list. |
<velt-inline-reactions-section-list-wireframe> | Iterates componentConfig.annotations and renders one reaction-pin per entry. |
<velt-...-wireframe> registration and inherits context variables from its parent.
The reaction-pin’s componentConfig.annotation carries from (the reactor), emoji, and users (everyone who reacted with the same emoji).
| Tag | Notes | Example |
|---|
<velt-reaction-pin-emoji-wireframe> | The emoji glyph itself. | <velt-data field="componentConfig.annotation.emoji" /> |
<velt-reaction-pin-count-wireframe> | The “+N” count badge when multiple users have reacted with the same emoji. | <velt-data field="componentConfig.annotation.users.length" /> |
<velt-reaction-pin-tooltip-users-wireframe> | The hover tooltip wrapper listing all reactors. | velt-class="'visible': {componentConfig.tooltipVisible}" |
<velt-reaction-pin-tooltip-user-wireframe> | A single reactor row inside the tooltip (iterated). | <velt-data field="user.name" /> |
<velt-reaction-pin-tooltip-user-avatar-wireframe> | Avatar inside a tooltip row. | <velt-data field="user.photoUrl" /> |
<velt-reaction-pin-tooltip-user-name-wireframe> | Name inside a tooltip row. | <velt-data field="user.name" /> |
reaction-tool ”+” button, the reactions-panel emoji picker opens. Each row exposes the per-iteration variable emoji ({ key, value, name? }) and isSelected.
| Tag | Notes | Example |
|---|
<velt-reactions-panel-items-wireframe> | The list wrapper that iterates the filtered emojis. | (composes per-item rows) |
<velt-reactions-panel-item-wireframe> | A single emoji row. | velt-class="'is-selected': {isSelected}" |
<velt-reactions-panel-item-emoji-wireframe> | The emoji glyph itself. | <velt-data field="emoji.value" /> |
Putting it together
A typical reaction-pin that highlights when the local user has reacted, plus a custom emoji picker row inside the reactions panel:
React / Next.js
Other Frameworks
<VeltReactionPinWireframe
velt-class="'is-mine': {componentConfig.isReactionSelectedByCurrentUser}">
<button className="my-pin">
<span><velt-data field="componentConfig.annotation.emoji" /></span>
<span velt-if="{componentConfig.annotation.users.length} > 1">
<velt-data field="componentConfig.annotation.users.length" />
</span>
</button>
</VeltReactionPinWireframe>
<VeltReactionsPanelItemWireframe>
<button
className="my-emoji-row"
velt-class="'is-selected': {isSelected}">
<VeltReactionsPanelItemEmojiWireframe>
<span className="my-emoji"><velt-data field="emoji.value" /></span>
</VeltReactionsPanelItemEmojiWireframe>
<velt-data field="emoji.name" />
</button>
</VeltReactionsPanelItemWireframe>
<velt-reaction-pin-wireframe
velt-class="'is-mine': {componentConfig.isReactionSelectedByCurrentUser}">
<button class="my-pin">
<span><velt-data field="componentConfig.annotation.emoji"></velt-data></span>
<span velt-if="{componentConfig.annotation.users.length} > 1">
<velt-data field="componentConfig.annotation.users.length"></velt-data>
</span>
</button>
</velt-reaction-pin-wireframe>
<velt-reactions-panel-item-wireframe>
<button class="my-emoji-row" velt-class="'is-selected': {isSelected}">
<velt-reactions-panel-item-emoji-wireframe>
<span class="my-emoji"><velt-data field="emoji.value"></velt-data></span>
</velt-reactions-panel-item-emoji-wireframe>
<velt-data field="emoji.name"></velt-data>
</button>
</velt-reactions-panel-item-wireframe>
