Velt Area Comments Best Practices

Implementation guide for Velt Area Comments — the rectangle area-annotation feature where users draw a box on the page and attach a comment thread to that region. Area is built on top of the Comments feature: it's not a separate component, it's a mode of <VeltComments> that is enabled by default and toggled via a prop or runtime method.

When to Apply

Reference these guidelines when:

• Toggling area comments on or off in your app (default is ON)
• Choosing between the declarative areaComment prop on <VeltComments> and the imperative commentElement.enableAreaComment() / disableAreaComment() API
• Building a custom area pin via the wireframe surface — only <velt-area-pin-portal-wireframe> registers; the tool and container do not yet
• Reading componentConfig.areaPinAnnotation, componentConfig.selected, componentConfig.isResizing, componentConfig.hideAreaAnnotation, or the geometry / resize-offset variables
• Typing against AreaAnnotation, AreaProperty, AreaTargetAnnotation, or AreaMetadata
• Understanding how an AreaAnnotation links back to the comment thread(s) it scopes via targetAnnotations[]

Area is a Comments-feature mode

There is no standalone <VeltArea> component. Area annotations are produced by the Comments feature when the area mode is active. The relevant SDK handle is client.getCommentElement() (the comments handle), not a hypothetical getAreaElement(). The three Area-specific public elements (<velt-area-pin-portal>, <velt-area-tool>, <velt-area-container>) are rendered automatically by the comments runtime when area mode is enabled.

Rule Categories by Priority