Page annotations (Tags, Arrows, Areas)

Customize Velt page annotations, tags, arrows, and areas with supported components and slots.

The three on-page annotation features. Be honest up front: these have a thin customization surface: they have not been migrated to the wireframe-slot system, so there are no wireframe slots and no velt-if/velt-class/velt-data tokens for them. Customize with CSS + props (and, for Tags, a [template] input + headless hooks).

Components

	Primitive	Wireframe
Tags	VeltTags, VeltTagTool	none (not migrated to wireframe slots)
Arrows	VeltArrows, VeltArrowTool	none
Areas	(no Velt* React wrapper: velt-areas / velt-area-tool custom elements only)	none (one internal portal stub only)

Tags also expose internal elements <velt-tag-pin> / <velt-tag-dialog> that accept a [template] input for custom rendering.

Config props

Tags

• VeltTags: prop pinHighlighterClass.
• VeltTagTool: prop targetTagElementId.
• <velt-tag-pin> / <velt-tag-dialog> accept a [template] input for custom rendering.

Arrows

• VeltArrows: untyped props.
• VeltArrowTool: prop darkMode.

Areas

• No dedicated React component: areas are driven by config + the velt-areas / velt-area-tool custom elements. The default area color is #625DF5.

CSS: stateful classes

None beyond host-element theming: these features have no built-in stateful-class table. Target the tag / arrow / area host (and pin) elements directly and theme via --velt-* (override with !important, R9b). The default area color is #625DF5.

Wireframes: slot trees + tokens

Not wireframeable: none of Tags / Arrows / Areas have been migrated to the wireframe-slot system, so there are no slots and no velt-if/velt-class/velt-data tokens (Areas has only one internal portal stub). For Arrows a flat componentConfig.arrowPinAnnotation/user/… exists internally but is not interpolation-live, so you can’t read it in markup yet. Customize via CSS + props (+ hooks for Tags).

Headless hooks

Tags (the main lever)

• useTagAnnotations(documentId?, location?) → TagAnnotation[] | null.
• useTagUtils() → the tag element. With these you can render tags entirely your own way (headless).

Arrows · Areas

None: no hooks for either; customize via CSS + props only.

Limitations

At a glance: what each sub-feature supports:

	Wireframe slots	{…} tokens	Headless hooks	React primitive	Customize with
Tags	❌ none	❌	✅ useTagAnnotations, useTagUtils	VeltTags, VeltTagTool	CSS, props, [template], hooks
Arrows	❌ none	❌	❌ none	VeltArrows, VeltArrowTool	CSS, darkMode prop
Areas	❌ none (one internal stub)	❌	❌ none	(no Velt* React wrapper: velt-areas / velt-area-tool elements only)	CSS, area color

Because there are no slots or hooks (beyond Tags), the right move when a design needs deep customization of arrows/areas is usually a headless-style approach for Tags (render from useTagAnnotations), or accept the default UI + CSS for arrows/areas. Per R0, don’t hack Velt’s internal arrow/area DOM to force a layout it doesn’t support: use CSS for what’s reachable and leave a comment for the rest.