Skip to main content
Source of truth: exhaustive for what it covers. Generated from Velt customization metadata.
  • If a name isn’t on this page (or its linked companions), it doesn’t exist: don’t use it.
  • Never invent or guess a name; use only identifiers that appear verbatim here or in the companion references, or that you verified against ground truth and added here.
  • Scope: comments are mapped exhaustively (primitive ↔ wireframe); other features are summarized at the end: see the companion references for their complete data.
Maps each comment surface to its primitive component and its wireframe family: a quick orientation. Comments are covered in depth; other features are summarized at the end (see Other features).
Companion references (use these for the complete data):
The slot trees on this page are an orientation overview; the complete trees + slot props live in Wireframe components. Don’t invent names.

​
Comments: primitives ↔ wireframes

Dialog dropdown sub-wireframes also exist: VeltCommentDialogOptionsDropdownTriggerWireframe / …ContentWireframe, and the same for Status and Priority dropdowns.
Snippyly* names are the legacy pre-”Velt” brand. Internally the SDK still defines components under Snippyly* directory/identifier names (SnippylyComments, SnippylyCommentTool, SnippylyPresence, …): Snippyly was Velt’s former product name. The package re-exports each one only under its Velt* name; there are no public Snippyly* exports to import. Always use the Velt* equivalent (SnippylyComments → VeltComments, SnippylyCommentTool → VeltCommentTool, …).

​
Surface lookup: props · flags · variables · refs (the one-stop map)

One entry per surface, so you can resolve everything for a surface from a single place. Each row lists:
  • The primitive and the root wireframe (registering the root is what turns shadow DOM off for that surface: see CSS and decision-tree S6).
  • The key props a customization typically sets.
  • The off-by-default flags to enable if the design shows them.
  • The key {variables} for dynamic markup.
These are the common identifiers. The exhaustive lists are Props, Feature flags, and Wireframe variables; slot trees are Wireframe components. Never use a name that isn’t in those (R10).
Root-wireframe note: each surface’s top-level Velt…Wireframe below is its root: registering it removes that surface’s own shadow DOM (class CSS reaches it). Dialog and pin are verified in-browser in Wireframe components. Nested/leaf-only wireframes don’t remove shadow: set shadowDom={false} there.

​
Comments

Gotchas & refs:
  • Comment dialog: ThreadCard must nest in Body → Threads. See Wireframes and the slot tree below.
  • Comment pin: Index/Number slots are empty containers: print with <velt-data field="annotation.annotationIndex">; page-mode comments have no index/number.
  • Sidebar (V1): container slots drop undeclared children: declare the full tree.
  • Text / Inline / Multi-thread surfaces: see Comment surfaces. Comment tool context: see Context.

​
Notifications

Details for all notification surfaces: Notifications.

​
VeltCommentDialogWireframe slot tree

The slots are static properties on VeltCommentDialogWireframe (and its nested .ThreadCard / .Composer / .AssigneeBanner / options content). They’re flat: you choose how to arrange them in your layout. Fill the ones you want; the rest fall back to defaults. This is the complete top-level set (the deeper tree is in Wireframe components): VeltCommentDialogWireframe.* (top-level slots) VeltCommentDialogWireframe.ThreadCard.* Nested slot sets
Deeper nesting and each slot’s props are in Wireframe components; what each slot is is defined in Component definitions.
Behavior lives in these slots (resolve, delete, submit, etc.): your markup goes inside a slot as its appearance (see the interactivity rule).
VeltCommentsSidebarWireframe: commonly-used slots (the complete set is in Wireframe components):
VeltCommentsSidebarV2Wireframe.*: complete top-level slots:
The full sidebar slot trees (V1 and V2, including composer attachments image/other → delete/download/loading, thread-card assign-button, reply-avatars, comment-bubble comments-count, …) are in Wireframe components.

​
How to find the complete slot list for a feature

  1. Wireframe components: the full slot tree + slot props for every wireframe.
  2. Wireframe variables: every {…} variable, grouped by feature.
  3. To confirm what a specific element renders as, inspect it in DevTools (shadowDom={false}) and look for velt-*-wireframe tags.

​
Other features (brief)

Each has a primitive + (usually) a wireframe family; see Other features: