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

# Live Selection

## 1. Enable/Disable Default Styling

* When enabled, the SDK will apply default styling to the selected elements.
* When disabled, the SDK will not apply any styling to the selected elements. You can use these classes to style the selected elements:
  * `.velt-live-selection-on-element`: This dynamic class will be added to the selected element only when there is a user on that element.
  * `.velt-live-selection-on-text`: This dynamic class will be added to the text node only when a user has selected that text.
* Default: `Enabled`.

<Tabs>
  <Tab title="React / Next.js">
    ```javascript theme={null}
    const selectionElement = client.getSelectionElement();

    selectionElement.enableDefaultStyling();
    selectionElement.disableDefaultStyling();
    ```

    **Custom Styling:**

    ```css theme={null}
    .velt-live-selection-on-element {
      outline: 2px solid var(--velt-color);
      outline-offset: -2px;
    }
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```javascript theme={null}
    const selectionElement = Velt.getSelectionElement();

    selectionElement.enableDefaultStyling();
    selectionElement.disableDefaultStyling();
    ```

    **Custom Styling:**

    ```css theme={null}
    .velt-live-selection-on-element {
      outline: 2px solid var(--velt-color);
      outline-offset: -2px;
    }
    ```
  </Tab>
</Tabs>