Concepts
Async Collaboration
- Comments
- In-app Notifications
- Recorder
- Inline Reactions Section
- Arrows
Realtime Collaboration
- Presence
- Single Editor Mode
- Live Selection
- Cursors
- Huddle
Comments
Inline Comments Section
Components that appear when using Inline Comments
We recommend that you familiarize yourselves with UI Customization Concepts before attempting to modify any components.
VeltInlineCommentsSectionWireframe
Copy
Ask AI
<VeltWireframe>
<VeltInlineCommentsSectionWireframe>
<VeltInlineCommentsSectionWireframe.Skeleton />
<VeltInlineCommentsSectionWireframe.Panel />
</VeltInlineCommentsSectionWireframe>
</VeltWireframe>
Copy
Ask AI
<VeltWireframe>
<VeltInlineCommentsSectionWireframe>
<VeltInlineCommentsSectionWireframe.Skeleton />
<VeltInlineCommentsSectionWireframe.Panel />
</VeltInlineCommentsSectionWireframe>
</VeltWireframe>
Copy
Ask AI
<velt-wireframe style="display:none;">
<velt-inline-comments-section-wireframe>
<velt-inline-comments-section-skeleton-wireframe></velt-inline-comments-section-skeleton-wireframe>
<velt-inline-comments-section-panel-wireframe></velt-inline-comments-section-panel-wireframe>
</velt-inline-comments-section-wireframe>
</velt-wireframe>
Skeleton
Copy
Ask AI
<VeltWireframe>
<VeltInlineCommentsSectionWireframe.Skeleton />
</VeltWireframe>
Copy
Ask AI
<VeltWireframe>
<VeltInlineCommentsSectionWireframe.Skeleton />
</VeltWireframe>
Copy
Ask AI
<velt-wireframe style="display:none;">
<velt-inline-comments-section-skeleton-wireframe></velt-inline-comments-section-skeleton-wireframe>
</velt-wireframe>
Panel
Copy
Ask AI
<VeltWireframe>
<VeltInlineCommentsSectionWireframe.Panel>
<VeltInlineCommentsSectionWireframe.ComposerContainer />
<VeltInlineCommentsSectionWireframe.SortingDropdown />
<VeltInlineCommentsSectionWireframe.CommentCount />
<VeltInlineCommentsSectionWireframe.List />
</VeltInlineCommentsSectionWireframe.Panel>
</VeltWireframe>
Copy
Ask AI
<VeltWireframe>
<VeltInlineCommentsSectionWireframe.Panel>
<VeltInlineCommentsSectionWireframe.ComposerContainer />
<VeltInlineCommentsSectionWireframe.SortingDropdown />
<VeltInlineCommentsSectionWireframe.CommentCount />
<VeltInlineCommentsSectionWireframe.List />
</VeltInlineCommentsSectionWireframe.Panel>
</VeltWireframe>
Copy
Ask AI
<velt-wireframe style="display:none;">
<velt-inline-comments-section-panel-wireframe>
<velt-inline-comments-section-composer-container-wireframe></velt-inline-comments-section-composer-container-wireframe>
<velt-inline-comments-section-sorting-dropdown-wireframe></velt-inline-comments-section-sorting-dropdown-wireframe>
<velt-inline-comments-section-comment-count-wireframe></velt-inline-comments-section-comment-count-wireframe>
<velt-inline-comments-section-list-wireframe></velt-inline-comments-section-list-wireframe>
</velt-inline-comments-section-panel-wireframe>
</velt-wireframe>
ComposerContainer
Copy
Ask AI
<VeltWireframe>
<VeltInlineCommentsSectionWireframe.ComposerContainer>
<VeltCommentDialogWireframe.Composer />
</VeltInlineCommentsSectionWireframe.ComposerContainer>
</VeltWireframe>
Copy
Ask AI
<VeltWireframe>
<VeltInlineCommentsSectionWireframe.ComposerContainer>
<VeltCommentDialogWireframe.Composer />
</VeltInlineCommentsSectionWireframe.ComposerContainer>
</VeltWireframe>
Copy
Ask AI
<velt-wireframe style="display:none;">
<velt-inline-comments-section-composer-container-wireframe>
<velt-comment-dialog-composer-wireframe></velt-comment-dialog-composer-wireframe>
</velt-inline-comments-section-composer-container-wireframe>
</velt-wireframe>
VeltCommentDialogWireframe.Composer
You can find the wireframe for the Comment Dialog Composer here.
SortingDropdown
Copy
Ask AI
<VeltWireframe>
<VeltInlineCommentsSectionWireframe.SortingDropdown>
<VeltInlineCommentsSectionWireframe.SortingDropdown.Trigger />
<VeltInlineCommentsSectionWireframe.SortingDropdown.Content />
</VeltInlineCommentsSectionWireframe.SortingDropdown>
</VeltWireframe>
Copy
Ask AI
<VeltWireframe>
<VeltInlineCommentsSectionWireframe.SortingDropdown>
<VeltInlineCommentsSectionWireframe.SortingDropdown.Trigger />
<VeltInlineCommentsSectionWireframe.SortingDropdown.Content />
</VeltInlineCommentsSectionWireframe.SortingDropdown>
</VeltWireframe>
Copy
Ask AI
<velt-wireframe style="display:none;">
<velt-inline-comments-section-sorting-dropdown-wireframe>
<velt-inline-comments-section-sorting-dropdown-trigger-wireframe></velt-inline-comments-section-sorting-dropdown-trigger-wireframe>
<velt-inline-comments-section-sorting-dropdown-content-wireframe></velt-inline-comments-section-sorting-dropdown-content-wireframe>
</velt-inline-comments-section-sorting-dropdown-wireframe>
</velt-wireframe>
Trigger
Copy
Ask AI
<VeltWireframe>
<VeltInlineCommentsSectionWireframe.SortingDropdown.Trigger>
<VeltInlineCommentsSectionWireframe.SortingDropdown.Trigger.Name />
<VeltInlineCommentsSectionWireframe.SortingDropdown.Trigger.Icon />
</VeltInlineCommentsSectionWireframe.SortingDropdown.Trigger>
</VeltWireframe>
Copy
Ask AI
<VeltWireframe>
<VeltInlineCommentsSectionWireframe.SortingDropdown.Trigger>
<VeltInlineCommentsSectionWireframe.SortingDropdown.Trigger.Name />
<VeltInlineCommentsSectionWireframe.SortingDropdown.Trigger.Icon />
</VeltInlineCommentsSectionWireframe.SortingDropdown.Trigger>
</VeltWireframe>
Copy
Ask AI
<velt-wireframe style="display:none;">
<velt-inline-comments-section-sorting-dropdown-trigger-wireframe>
<velt-inline-comments-section-sorting-dropdown-trigger-name-wireframe></velt-inline-comments-section-sorting-dropdown-trigger-name-wireframe>
<velt-inline-comments-section-sorting-dropdown-trigger-icon-wireframe></velt-inline-comments-section-sorting-dropdown-trigger-icon-wireframe>
</velt-inline-comments-section-sorting-dropdown-trigger-wireframe>
</velt-wireframe>
Name
Copy
Ask AI
<VeltWireframe>
<VeltInlineCommentsSectionWireframe.SortingDropdown.Trigger.Name />
</VeltWireframe>
Copy
Ask AI
<VeltWireframe>
<VeltInlineCommentsSectionWireframe.SortingDropdown.Trigger.Name />
</VeltWireframe>
Copy
Ask AI
<velt-wireframe style="display:none;">
<velt-inline-comments-section-sorting-dropdown-trigger-name-wireframe></velt-inline-comments-section-sorting-dropdown-trigger-name-wireframe>
</velt-wireframe>
Icon
Copy
Ask AI
<VeltWireframe>
<VeltInlineCommentsSectionWireframe.SortingDropdown.Trigger.Icon />
</VeltWireframe>
Copy
Ask AI
<VeltWireframe>
<VeltInlineCommentsSectionWireframe.SortingDropdown.Trigger.Icon />
</VeltWireframe>
Copy
Ask AI
<velt-wireframe style="display:none;">
<velt-inline-comments-section-sorting-dropdown-trigger-icon-wireframe></velt-inline-comments-section-sorting-dropdown-trigger-icon-wireframe>
</velt-wireframe>
Content
Copy
Ask AI
<VeltWireframe>
<VeltInlineCommentsSectionWireframe.SortingDropdown.Content>
<VeltInlineCommentsSectionWireframe.SortingDropdown.Content.Item />
</VeltInlineCommentsSectionWireframe.SortingDropdown.Content>
</VeltWireframe>
Copy
Ask AI
<VeltWireframe>
<VeltInlineCommentsSectionWireframe.SortingDropdown.Content>
<VeltInlineCommentsSectionWireframe.SortingDropdown.Content.Item />
</VeltInlineCommentsSectionWireframe.SortingDropdown.Content>
</VeltWireframe>
Copy
Ask AI
<velt-wireframe style="display:none;">
<velt-inline-comments-section-sorting-dropdown-content-wireframe>
<velt-inline-comments-section-sorting-dropdown-content-item-wireframe></velt-inline-comments-section-sorting-dropdown-content-item-wireframe>
</velt-inline-comments-section-sorting-dropdown-content-wireframe>
</velt-wireframe>
Item
Copy
Ask AI
<VeltWireframe>
<VeltInlineCommentsSectionWireframe.SortingDropdown.Content.Item>
<VeltInlineCommentsSectionWireframe.SortingDropdown.Content.Item.Icon />
<VeltInlineCommentsSectionWireframe.SortingDropdown.Content.Item.Tick />
<VeltInlineCommentsSectionWireframe.SortingDropdown.Content.Item.Name />
</VeltInlineCommentsSectionWireframe.SortingDropdown.Content.Item>
</VeltWireframe>
Copy
Ask AI
<VeltWireframe>
<VeltInlineCommentsSectionWireframe.SortingDropdown.Content.Item>
<VeltInlineCommentsSectionWireframe.SortingDropdown.Content.Item.Icon />
<VeltInlineCommentsSectionWireframe.SortingDropdown.Content.Item.Tick />
<VeltInlineCommentsSectionWireframe.SortingDropdown.Content.Item.Name />
</VeltInlineCommentsSectionWireframe.SortingDropdown.Content.Item>
</VeltWireframe>
Copy
Ask AI
<velt-wireframe style="display:none;">
<velt-inline-comments-section-sorting-dropdown-content-item-wireframe>
<velt-inline-comments-section-sorting-dropdown-content-item-icon-wireframe></velt-inline-comments-section-sorting-dropdown-content-item-icon-wireframe>
<velt-inline-comments-section-sorting-dropdown-content-item-tick-wireframe></velt-inline-comments-section-sorting-dropdown-content-item-tick-wireframe>
<velt-inline-comments-section-sorting-dropdown-content-item-name-wireframe></velt-inline-comments-section-sorting-dropdown-content-item-name-wireframe>
</velt-inline-comments-section-sorting-dropdown-content-item-wireframe>
</velt-wireframe>
CommentCount
Copy
Ask AI
<VeltWireframe>
<VeltInlineCommentsSectionWireframe.CommentCount />
</VeltWireframe>
Copy
Ask AI
<VeltWireframe>
<VeltInlineCommentsSectionWireframe.CommentCount />
</VeltWireframe>
Copy
Ask AI
<velt-wireframe style="display:none;">
<velt-inline-comments-section-comment-count-wireframe></velt-inline-comments-section-comment-count-wireframe>
</velt-wireframe>
List
Copy
Ask AI
<VeltWireframe>
<VeltInlineCommentsSectionWireframe.List>
<VeltCommentDialogWireframe />
</VeltInlineCommentsSectionWireframe.List>
</VeltWireframe>
Copy
Ask AI
<VeltWireframe>
<VeltInlineCommentsSectionWireframe.List>
<VeltCommentDialogWireframe />
</VeltInlineCommentsSectionWireframe.List>
</VeltWireframe>
Copy
Ask AI
<velt-wireframe style="display:none;">
<velt-inline-comments-section-list-wireframe>
<velt-comment-dialog-wireframe></velt-comment-dialog-wireframe>
</velt-inline-comments-section-list-wireframe>
</velt-wireframe>
VeltCommentDialogWireframe
You can find the wireframe for the Comment Dialog here.
Pre-defined Variants
Here are the pre-deinfed variants:
dialog-variant: Use this to customize theComment Dialogthat appears within theInline Comments Sectioncomponent.variant: Use this to customize the entireInline Comments Sectioncomponent itself.composer-variant: Use this to customize the main Composer that appears within theInline Comments Sectioncomponent.
Learn more about Variants here
React / Next.js
Copy
Ask AI
<VeltInlineCommentsSection
dialogVariant="dialog-variant-name"
variant="inline-comment-section-variant-name"
composerVariant="inline"
/>
React / Next.js
Copy
Ask AI
<VeltInlineCommentsSection
dialogVariant="dialog-variant-name"
variant="inline-comment-section-variant-name"
composerVariant="inline"
/>
Copy
Ask AI
<velt-inline-comments-section
dialog-variant="dialog-variant-name"
variant="inline-comment-section-variant-name"
composer-variant="inline"
>
</velt-inline-comments-section>
Was this page helpful?
Assistant
Responses are generated using AI and may contain mistakes.