Comment Dialog Customization

The four ways to customize the Velt Comment Dialog — wireframes, template variables, primitives, and the structure reference — and when to use each.

New to Velt customization? Read the UI Customization Concepts first — wireframes, template variables, and conditional templates work the same way across all Velt components.

The Comment Dialog is the comment thread UI — header, comments, composer, and actions — that appears when a user opens a comment from a pin, a text highlight, or the sidebar.

You can customize it in 4 key ways:

1. Wireframes: Rearrange, replace, or remove parts of the default dialog
2. Template Variables: Render dialog data and drive show/hide logic and conditional classes
3. Primitives: Build a fully custom dialog UI from standalone components
4. Structure Reference: Canonical tree of every wireframe component

1. Wireframes

Wireframes are global templates that re-layout the default dialog. Define one once, and every Comment Dialog in your app renders with your layout — the behavior stays Velt’s.

Use wireframes when:

• ✅ You want the default dialog, restyled or rearranged
• ✅ You want to remove parts you don’t need (for example the priority dropdown or reactions)
• ✅ You want to reorder sections or swap in your own HTML around them

Not a fit when:

• ❌ You want to place individual dialog pieces elsewhere in your app as standalone UI — use Primitives instead

Open the Wireframes reference →

2. Template Variables

The dialog exposes its data — annotation, comments, users, state — as template variables. Use them inside any wireframe tag in three forms:

You want to…	Use	Example
Display a value as text	<velt-data field="var" />	<velt-data field="annotation.from.name" />
Hide / show conditionally	velt-if="{var}"	velt-if="{isPrivateComment}"
Toggle a CSS class	velt-class="'cls': {var}"	velt-class="'is-private': {isPrivateComment}"

Open the Template Variables reference →

Related concepts: Conditional Templates · Injecting your own data

3. Primitives

Primitives are standalone, functional components — 98+ granular building blocks (avatars, composers, action buttons, banners) you compose into a completely custom comment UI, inside or outside the dialog.

Wireframes vs. Primitives:

	Wireframes	Primitives
What they are	Non-functional layout templates	Functional components
Scope	Re-template the default dialog globally	Compose anywhere in your app
Best for	Restyling / rearranging the existing dialog	Building your own comment UI from parts

Explore primitives interactively in our Storybook.

Open the Primitives reference →

4. Structure Reference

A canonical parent/child tree of every Comment Dialog wireframe component — React (VeltCommentDialogWireframe.*) and HTML (velt-comment-dialog-*-wireframe) names side by side. Use it to find the exact component to target before writing a wireframe.

Open the Structure reference →

Related concepts

• Styling: themes, dark mode, and custom CSS
• Action Components: add custom buttons with callbacks to the dialog
• Localisation: translate the dialog’s static strings