> ## Documentation Index
> Fetch the complete documentation index at: https://velt-mintlify-e6426361.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Single Editor Mode

> Customize the Velt Single Editor Mode Panel — wireframes for the takeover banner that shows when one user is editing and others are locked to view-only.

<Note>
  We recommend that you familiarize yourselves with [UI Customization Concepts](/ui-customization/overview) before attempting to modify any components.
</Note>

## VeltSingleEditorModePanelWireframe

<img src="https://mintcdn.com/velt-mintlify-e6426361/WBhVO6ET7Bo1kl3p/images/customization/single-editor/single-editor-overview.png?fit=max&auto=format&n=WBhVO6ET7Bo1kl3p&q=85&s=ab38770bc37771c527226c63b4391706" alt="" width="1280" height="640" data-path="images/customization/single-editor/single-editor-overview.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <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>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <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>
    ```
  </Tab>
</Tabs>

### ViewerText

<img src="https://mintcdn.com/velt-mintlify-e6426361/WBhVO6ET7Bo1kl3p/images/customization/single-editor/single-editor-viewer-text.png?fit=max&auto=format&n=WBhVO6ET7Bo1kl3p&q=85&s=945618a0304217af43942bd46c4c48d9" alt="" width="1280" height="246" data-path="images/customization/single-editor/single-editor-viewer-text.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltSingleEditorModePanelWireframe.ViewerText />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-single-editor-mode-panel-viewer-text-wireframe></velt-single-editor-mode-panel-viewer-text-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

### EditorText

<img src="https://mintcdn.com/velt-mintlify-e6426361/WBhVO6ET7Bo1kl3p/images/customization/single-editor/single-editor-active-editor-text.png?fit=max&auto=format&n=WBhVO6ET7Bo1kl3p&q=85&s=358b6d5884209916b296d5a86b493def" alt="" width="1280" height="246" data-path="images/customization/single-editor/single-editor-active-editor-text.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltSingleEditorModePanelWireframe.EditorText />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-single-editor-mode-panel-editor-text-wireframe></velt-single-editor-mode-panel-editor-text-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

### Countdown

<img src="https://mintcdn.com/velt-mintlify-e6426361/WBhVO6ET7Bo1kl3p/images/customization/single-editor/single-editor-countdown.png?fit=max&auto=format&n=WBhVO6ET7Bo1kl3p&q=85&s=713c4ed7a017b0435e18e71dfafa6107" alt="" width="1280" height="246" data-path="images/customization/single-editor/single-editor-countdown.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltSingleEditorModePanelWireframe.Countdown />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-single-editor-mode-panel-countdown-wireframe></velt-single-editor-mode-panel-countdown-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

### EditHere

<img src="https://mintcdn.com/velt-mintlify-e6426361/WBhVO6ET7Bo1kl3p/images/customization/single-editor/single-editor-edit-here.png?fit=max&auto=format&n=WBhVO6ET7Bo1kl3p&q=85&s=9913f7dd3ad605f678a1aa53b3e6e3cb" alt="" width="1280" height="246" data-path="images/customization/single-editor/single-editor-edit-here.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltSingleEditorModePanelWireframe.EditHere />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-single-editor-mode-panel-edit-here-wireframe></velt-single-editor-mode-panel-edit-here-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

### AcceptRequest

<img src="https://mintcdn.com/velt-mintlify-e6426361/WBhVO6ET7Bo1kl3p/images/customization/single-editor/single-editor-accept-request.png?fit=max&auto=format&n=WBhVO6ET7Bo1kl3p&q=85&s=df4748cefa80b591fc9bef5d3e3ca6f0" alt="" width="1280" height="246" data-path="images/customization/single-editor/single-editor-accept-request.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltSingleEditorModePanelWireframe.AcceptRequest />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-single-editor-mode-panel-accept-request-wireframe></velt-single-editor-mode-panel-accept-request-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

### RejectRequest

<img src="https://mintcdn.com/velt-mintlify-e6426361/WBhVO6ET7Bo1kl3p/images/customization/single-editor/single-editor-reject-request.png?fit=max&auto=format&n=WBhVO6ET7Bo1kl3p&q=85&s=cd10f831e365142809af0e14827bffee" alt="" width="1280" height="246" data-path="images/customization/single-editor/single-editor-reject-request.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltSingleEditorModePanelWireframe.RejectRequest />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-single-editor-mode-panel-reject-request-wireframe></velt-single-editor-mode-panel-reject-request-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

### RequestAccess

<img src="https://mintcdn.com/velt-mintlify-e6426361/WBhVO6ET7Bo1kl3p/images/customization/single-editor/single-editor-request-access.png?fit=max&auto=format&n=WBhVO6ET7Bo1kl3p&q=85&s=1bea419bb6c72712b3915df28ff3a7fe" alt="" width="1280" height="246" data-path="images/customization/single-editor/single-editor-request-access.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltSingleEditorModePanelWireframe.RequestAccess />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-single-editor-mode-panel-request-access-wireframe></velt-single-editor-mode-panel-request-access-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

### CancelRequest

<img src="https://mintcdn.com/velt-mintlify-e6426361/WBhVO6ET7Bo1kl3p/images/customization/single-editor/single-editor-cancel-request.png?fit=max&auto=format&n=WBhVO6ET7Bo1kl3p&q=85&s=6b2d3c1711776de92a2e713430cfb012" alt="" width="1280" height="246" data-path="images/customization/single-editor/single-editor-cancel-request.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltSingleEditorModePanelWireframe.CancelRequest />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-single-editor-mode-panel-cancel-request-wireframe></velt-single-editor-mode-panel-cancel-request-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

## 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`

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltSingleEditorModePanel shadowDom={false} />
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-single-editor-mode-panel shadow-dom="false"></velt-single-editor-mode-panel>
    ```
  </Tab>
</Tabs>

### Dark Mode

By default, all components are in Light Mode. Use this prop to enable Dark Mode.

Default: `false`

<Tabs>
  <Tab title="React / Next.js">
    ```js theme={null}
    <VeltSingleEditorModePanel darkMode={true} />
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
      <velt-single-editor-mode-panel dark-mode="true"></velt-single-editor-mode-panel>
    ```
  </Tab>
</Tabs>

### Variants

You can apply variants like you do for other components. You need to define variants using Wireframes. Read more here [here](/ui-customization/layout#create-custom-variants).

<Tabs>
  <Tab title="React / Next.js">
    ```js theme={null}
    <VeltSingleEditorModePanel variant="variant-name" />
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
      <velt-single-editor-mode-panel variant="variant-name"></velt-single-editor-mode-panel>
    ```
  </Tab>
</Tabs>
