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

> [tab] 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] 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;
> }
> ```


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.