Reactions Wireframe Variables

Template variables exposed by the Reactions wireframe — read them with velt-data, velt-if, and velt-class to drive dynamic content, conditional rendering, and class toggling.

New to wireframes? Start with UI Customization Concepts and the Template Variables overview.

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).

Component Config — Reaction Tool

State on the <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" />
reaction	ReactionAnnotation	<velt-reaction-pin-tooltip-user-wireframe> and its children	<velt-data field="reaction.emoji" />
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.

reaction-tool

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.

---

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.

Property	Value
Extra variables	See Component Config — Inline Reactions Section.

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.

Deeply-Nested Wireframe Tags

The reaction-pin and the reactions-panel decompose further. Each tag below has its own <velt-...-wireframe> registration and inherits context variables from its parent.

Reaction Pin tags

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" />

Reactions Panel tags

When the user clicks the 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" />

Reactions Panel example

React / Next.js

<VeltReactionsPanelWireframe.Items.Item>
  <button className="my-emoji-row">
    <VeltReactionsPanelWireframe.Items.Item.Emoji>
      <span className="my-emoji">
        <VeltData field="emoji.value" />
      </span>
    </VeltReactionsPanelWireframe.Items.Item.Emoji>
    <VeltData field="emoji.name" />
  </button>
</VeltReactionsPanelWireframe.Items.Item>

Other Frameworks

<velt-reactions-panel-item-wireframe>
  <button class="my-emoji-row">
    <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>

Related

• Inline Reactions — wireframe overview for the inline-reactions section primitive.
• Template Variables — overview of the velt-data / velt-if / velt-class system.