Velt Arrows Best Practices

Implementation guide for the Velt Arrows feature — a directional-arrow annotation primitive that lets users draw arrows pinned to DOM elements (or specific regions of them) for visual feedback, design review, and collaborative pointing.

When to Apply

Reference these guidelines when:

• Setting up Velt Arrows in a React, Next.js, or HTML app
• Placing the <VeltArrows> (or <velt-arrows>) root component and the <VeltArrowTool> (or <velt-arrow-tool>) trigger
• Restricting where arrows can be drawn via allowedElementIds (prop OR arrowElement.allowedElementIds() method)
• Enabling darkMode
• Replacing the default arrow-tool button with a custom button (child-slot pattern)
• Styling the arrow tool via CSS ::part(...) hooks
• Typing against ArrowAnnotation and AnnotationProperty (including arrowLength / arrowAngle) from the data model
• Calling client.getArrowElement() to get the ArrowElement handle

For general SDK setup (VeltProvider, auth, document identity) see velt-setup-best-practices. For UI-customization concepts that overlap with other Velt features, see velt-comments-best-practices.

Known limitation — wireframe-tag interpolation