Concepts
Async Collaboration
- Comments
- In-app Notifications
- Recorder
- Inline Reactions Section
- Arrows
Realtime Collaboration
- Presence
- Single Editor Mode
- Live Selection
- Cursors
- Huddle
Realtime Collaboration
Single Editor Mode
Wireframes for the Single Editor Mode Panel.
We recommend that you familiarize yourselves with UI Customization Concepts before attempting to modify any components.
VeltSingleEditorModePanelWireframe
Copy
Ask AI
<VeltWireframe>
<VeltSingleEditorModePanelWireframe>
<VeltSingleEditorModePanelWireframe.ViewerText />
<VeltSingleEditorModePanelWireframe.EditorText />
<VeltSingleEditorModePanelWireframe.Countdown />
{/* Editor sees this button when they try to edit in a different tab */}
<VeltSingleEditorModePanelWireframe.EditHere />
{/* Editor sees these buttons when Viewer requests access */}
<VeltSingleEditorModePanelWireframe.AcceptRequest />
<VeltSingleEditorModePanelWireframe.RejectRequest />
{/* Viewer sees this button by default */}
<VeltSingleEditorModePanelWireframe.RequestAccess />
{/* Viewer sees this button when they have already requested access */}
<VeltSingleEditorModePanelWireframe.CancelRequest />
</VeltSingleEditorModePanelWireframe>
</VeltWireframe>
Copy
Ask AI
<VeltWireframe>
<VeltSingleEditorModePanelWireframe>
<VeltSingleEditorModePanelWireframe.ViewerText />
<VeltSingleEditorModePanelWireframe.EditorText />
<VeltSingleEditorModePanelWireframe.Countdown />
{/* Editor sees this button when they try to edit in a different tab */}
<VeltSingleEditorModePanelWireframe.EditHere />
{/* Editor sees these buttons when Viewer requests access */}
<VeltSingleEditorModePanelWireframe.AcceptRequest />
<VeltSingleEditorModePanelWireframe.RejectRequest />
{/* Viewer sees this button by default */}
<VeltSingleEditorModePanelWireframe.RequestAccess />
{/* Viewer sees this button when they have already requested access */}
<VeltSingleEditorModePanelWireframe.CancelRequest />
</VeltSingleEditorModePanelWireframe>
</VeltWireframe>
Copy
Ask AI
<velt-wireframe style="display:none;">
<velt-single-editor-mode-panel-wireframe>
<velt-single-editor-mode-panel-viewer-text-wireframe></velt-single-editor-mode-panel-viewer-text-wireframe>
<velt-single-editor-mode-panel-editor-text-wireframe></velt-single-editor-mode-panel-editor-text-wireframe>
<velt-single-editor-mode-panel-countdown-wireframe></velt-single-editor-mode-panel-countdown-wireframe>
<!-- Editor sees this button when they try to edit in a different tab -->
<velt-single-editor-mode-panel-edit-here-wireframe></velt-single-editor-mode-panel-edit-here-wireframe>
<!-- Editor sees these buttons when Viewer requests access -->
<velt-single-editor-mode-panel-accept-request-wireframe></velt-single-editor-mode-panel-accept-request-wireframe>
<velt-single-editor-mode-panel-reject-request-wireframe></velt-single-editor-mode-panel-reject-request-wireframe>
<!-- Viewer sees these buttons by default -->
<velt-single-editor-mode-panel-request-access-wireframe></velt-single-editor-mode-panel-request-access-wireframe>
<!-- Viewer sees this button when they have already requested access -->
<velt-single-editor-mode-panel-cancel-request-wireframe></velt-single-editor-mode-panel-cancel-request-wireframe>
</velt-single-editor-mode-panel-wireframe>
</velt-wireframe>
ViewerText
Copy
Ask AI
<VeltWireframe>
<VeltSingleEditorModePanelWireframe.ViewerText />
</VeltWireframe>
Copy
Ask AI
<VeltWireframe>
<VeltSingleEditorModePanelWireframe.ViewerText />
</VeltWireframe>
Copy
Ask AI
<velt-wireframe style="display:none;">
<velt-single-editor-mode-panel-viewer-text-wireframe></velt-single-editor-mode-panel-viewer-text-wireframe>
</velt-wireframe>
EditorText
Copy
Ask AI
<VeltWireframe>
<VeltSingleEditorModePanelWireframe.EditorText />
</VeltWireframe>
Copy
Ask AI
<VeltWireframe>
<VeltSingleEditorModePanelWireframe.EditorText />
</VeltWireframe>
Copy
Ask AI
<velt-wireframe style="display:none;">
<velt-single-editor-mode-panel-editor-text-wireframe></velt-single-editor-mode-panel-editor-text-wireframe>
</velt-wireframe>
Countdown
Copy
Ask AI
<VeltWireframe>
<VeltSingleEditorModePanelWireframe.Countdown />
</VeltWireframe>
Copy
Ask AI
<VeltWireframe>
<VeltSingleEditorModePanelWireframe.Countdown />
</VeltWireframe>
Copy
Ask AI
<velt-wireframe style="display:none;">
<velt-single-editor-mode-panel-countdown-wireframe></velt-single-editor-mode-panel-countdown-wireframe>
</velt-wireframe>
EditHere
Copy
Ask AI
<VeltWireframe>
<VeltSingleEditorModePanelWireframe.EditHere />
</VeltWireframe>
Copy
Ask AI
<VeltWireframe>
<VeltSingleEditorModePanelWireframe.EditHere />
</VeltWireframe>
Copy
Ask AI
<velt-wireframe style="display:none;">
<velt-single-editor-mode-panel-edit-here-wireframe></velt-single-editor-mode-panel-edit-here-wireframe>
</velt-wireframe>
AcceptRequest
Copy
Ask AI
<VeltWireframe>
<VeltSingleEditorModePanelWireframe.AcceptRequest />
</VeltWireframe>
Copy
Ask AI
<VeltWireframe>
<VeltSingleEditorModePanelWireframe.AcceptRequest />
</VeltWireframe>
Copy
Ask AI
<velt-wireframe style="display:none;">
<velt-single-editor-mode-panel-accept-request-wireframe></velt-single-editor-mode-panel-accept-request-wireframe>
</velt-wireframe>
RejectRequest
Copy
Ask AI
<VeltWireframe>
<VeltSingleEditorModePanelWireframe.RejectRequest />
</VeltWireframe>
Copy
Ask AI
<VeltWireframe>
<VeltSingleEditorModePanelWireframe.RejectRequest />
</VeltWireframe>
Copy
Ask AI
<velt-wireframe style="display:none;">
<velt-single-editor-mode-panel-reject-request-wireframe></velt-single-editor-mode-panel-reject-request-wireframe>
</velt-wireframe>
RequestAccess
Copy
Ask AI
<VeltWireframe>
<VeltSingleEditorModePanelWireframe.RequestAccess />
</VeltWireframe>
Copy
Ask AI
<VeltWireframe>
<VeltSingleEditorModePanelWireframe.RequestAccess />
</VeltWireframe>
Copy
Ask AI
<velt-wireframe style="display:none;">
<velt-single-editor-mode-panel-request-access-wireframe></velt-single-editor-mode-panel-request-access-wireframe>
</velt-wireframe>
CancelRequest
Copy
Ask AI
<VeltWireframe>
<VeltSingleEditorModePanelWireframe.CancelRequest />
</VeltWireframe>
Copy
Ask AI
<VeltWireframe>
<VeltSingleEditorModePanelWireframe.CancelRequest />
</VeltWireframe>
Copy
Ask AI
<velt-wireframe style="display:none;">
<velt-single-editor-mode-panel-cancel-request-wireframe></velt-single-editor-mode-panel-cancel-request-wireframe>
</velt-wireframe>
Styling
Disable ShadowDOM
- By default, Shadow DOM is used to ensure that your app’s CSS does not interfere with the styling of the SDK components.
- Disable the shadow dom to apply your custom CSS to the component.
Default: true
Copy
Ask AI
<VeltSingleEditorModePanel shadowDom={false} />
Copy
Ask AI
<VeltSingleEditorModePanel shadowDom={false} />
Copy
Ask AI
<velt-single-editor-mode-panel shadow-dom="false"></velt-single-editor-mode-panel>
Dark Mode
By default, all components are in Light Mode. Use this prop to enable Dark Mode.
Default: false
Copy
Ask AI
<VeltSingleEditorModePanel darkMode={true} />
Copy
Ask AI
<VeltSingleEditorModePanel darkMode={true} />
Copy
Ask AI
<velt-single-editor-mode-panel dark-mode="true"></velt-single-editor-mode-panel>
Variants
You can apply variants like you do for other components. You need to define variants using Wireframes. Read more here here.
Copy
Ask AI
<VeltSingleEditorModePanel variant="variant-name" />
Copy
Ask AI
<VeltSingleEditorModePanel variant="variant-name" />
Copy
Ask AI
<velt-single-editor-mode-panel variant="variant-name"></velt-single-editor-mode-panel>
Was this page helpful?
Assistant
Responses are generated using AI and may contain mistakes.