Skip to main content
We recommend that you familiarize yourselves with UI Customization Concepts before attempting to modify any components.

​
VeltSingleEditorModePanelWireframe

  • React / Next.js
  • Other Frameworks
<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>

​
ViewerText

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltSingleEditorModePanelWireframe.ViewerText />
</VeltWireframe>

​
EditorText

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltSingleEditorModePanelWireframe.EditorText />
</VeltWireframe>

​
Countdown

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltSingleEditorModePanelWireframe.Countdown />
</VeltWireframe>

​
EditHere

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltSingleEditorModePanelWireframe.EditHere />
</VeltWireframe>

​
AcceptRequest

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltSingleEditorModePanelWireframe.AcceptRequest />
</VeltWireframe>

​
RejectRequest

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltSingleEditorModePanelWireframe.RejectRequest />
</VeltWireframe>

​
RequestAccess

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltSingleEditorModePanelWireframe.RequestAccess />
</VeltWireframe>

​
CancelRequest

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltSingleEditorModePanelWireframe.CancelRequest />
</VeltWireframe>

​
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
  • React / Next.js
  • Other Frameworks
<VeltSingleEditorModePanel shadowDom={false} />

​
Dark Mode

By default, all components are in Light Mode. Use this prop to enable Dark Mode. Default: false
  • React / Next.js
  • Other Frameworks
<VeltSingleEditorModePanel darkMode={true} />

​
Variants

You can apply variants like you do for other components. You need to define variants using Wireframes. Read more here here.
  • React / Next.js
  • Other Frameworks
<VeltSingleEditorModePanel variant="variant-name" />
⌘I