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

# Video Editor

> Video editor component.

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

## Overview

<img src="https://mintcdn.com/velt-v6-0-0-beta-3/7XdjatzNOROMUuxp/images/customization/recorder/editor-overview.png?fit=max&auto=format&n=7XdjatzNOROMUuxp&q=85&s=2c28bfac555bacd98e1460e5591e7bc9" alt="" width="1280" height="873" data-path="images/customization/recorder/editor-overview.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltVideoEditorPlayerWireframe>
            <VeltVideoEditorPlayerWireframe.Title />
            <VeltVideoEditorPlayerWireframe.ApplyButton />
            <VeltVideoEditorPlayerWireframe.RetakeButton />
            <VeltVideoEditorPlayerWireframe.DownloadButton />
            <VeltVideoEditorPlayerWireframe.CloseButton />
            <VeltVideoEditorPlayerWireframe.Preview />
            <VeltVideoEditorPlayerWireframe.ToggleButton />
            <VeltVideoEditorPlayerWireframe.Time />
            <VeltVideoEditorPlayerWireframe.SplitButton />
            <VeltVideoEditorPlayerWireframe.DeleteButton />
            <VeltVideoEditorPlayerWireframe.AddZoomButton />
            <VeltVideoEditorPlayerWireframe.Timeline />
        </VeltVideoEditorPlayerWireframe>
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-video-editor-player-wireframe>
            <velt-video-editor-player-title-wireframe></velt-video-editor-player-title-wireframe>
            <velt-video-editor-player-apply-button-wireframe></velt-video-editor-player-apply-button-wireframe>
            <velt-video-editor-player-retake-button-wireframe></velt-video-editor-player-retake-button-wireframe>
            <velt-video-editor-player-download-button-wireframe></velt-video-editor-player-download-button-wireframe>
            <velt-video-editor-player-close-button-wireframe></velt-video-editor-player-close-button-wireframe>
            <velt-video-editor-player-preview-wireframe></velt-video-editor-player-preview-wireframe>
            <velt-video-editor-player-toggle-button-wireframe></velt-video-editor-player-toggle-button-wireframe>
            <velt-video-editor-player-time-wireframe></velt-video-editor-player-time-wireframe>
            <velt-video-editor-player-split-button-wireframe></velt-video-editor-player-split-button-wireframe>
            <velt-video-editor-player-delete-button-wireframe></velt-video-editor-player-delete-button-wireframe>
            <velt-video-editor-player-add-zoom-button-wireframe></velt-video-editor-player-add-zoom-button-wireframe>
            <velt-video-editor-player-timeline-wireframe></velt-video-editor-player-timeline-wireframe>
        </velt-video-editor-player-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

### Title

<img src="https://mintcdn.com/velt-v6-0-0-beta-3/7XdjatzNOROMUuxp/images/customization/recorder/editor-title.png?fit=max&auto=format&n=7XdjatzNOROMUuxp&q=85&s=6145e93e6959aa31930d5821753bb0e9" alt="" width="1280" height="240" data-path="images/customization/recorder/editor-title.png" />

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

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

### ApplyButton

<img src="https://mintcdn.com/velt-v6-0-0-beta-3/7XdjatzNOROMUuxp/images/customization/recorder/editor-apply.png?fit=max&auto=format&n=7XdjatzNOROMUuxp&q=85&s=b5c1cf2337618ccd6d4d9243c058a2ed" alt="" width="1280" height="240" data-path="images/customization/recorder/editor-apply.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltVideoEditorPlayerWireframe.ApplyButton>
            <VeltVideoEditorPlayerWireframe.ApplyButton.Loading />
        </VeltVideoEditorPlayerWireframe.ApplyButton>
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-video-editor-player-apply-button-wireframe>
            <velt-video-editor-player-apply-button-loading-wireframe></velt-video-editor-player-apply-button-loading-wireframe>
        </velt-video-editor-player-apply-button-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

#### Loading

<img src="https://mintcdn.com/velt-v6-0-0-beta-3/7XdjatzNOROMUuxp/images/customization/recorder/editor-apply-loading.png?fit=max&auto=format&n=7XdjatzNOROMUuxp&q=85&s=91466efe92901f1646c337e3ab48381d" alt="" width="1280" height="240" data-path="images/customization/recorder/editor-apply-loading.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltVideoEditorPlayerWireframe.ApplyButton.Loading />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-video-editor-player-apply-button-loading-wireframe></velt-video-editor-player-apply-button-loading-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

### RetakeButton

<img src="https://mintcdn.com/velt-v6-0-0-beta-3/7XdjatzNOROMUuxp/images/customization/recorder/editor-retake.png?fit=max&auto=format&n=7XdjatzNOROMUuxp&q=85&s=c61ddb891b83301756d79bf88192a5b4" alt="" width="1280" height="240" data-path="images/customization/recorder/editor-retake.png" />

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-video-editor-player-retake-button-wireframe></velt-video-editor-player-retake-button-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

### DownloadButton

<img src="https://mintcdn.com/velt-v6-0-0-beta-3/7XdjatzNOROMUuxp/images/customization/recorder/editor-download.png?fit=max&auto=format&n=7XdjatzNOROMUuxp&q=85&s=d69e72bd8c8c8b7844f15d6ca4870626" alt="" width="1280" height="240" data-path="images/customization/recorder/editor-download.png" />

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-video-editor-player-download-button-wireframe></velt-video-editor-player-download-button-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

### CloseButton

<img src="https://mintcdn.com/velt-v6-0-0-beta-3/7XdjatzNOROMUuxp/images/customization/recorder/editor-close.png?fit=max&auto=format&n=7XdjatzNOROMUuxp&q=85&s=b2258a1231d254f11842ae0d00129dbc" alt="" width="1280" height="240" data-path="images/customization/recorder/editor-close.png" />

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-video-editor-player-close-button-wireframe></velt-video-editor-player-close-button-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

### Preview

<img src="https://mintcdn.com/velt-v6-0-0-beta-3/7XdjatzNOROMUuxp/images/customization/recorder/editor-preview.png?fit=max&auto=format&n=7XdjatzNOROMUuxp&q=85&s=13898c14ed72ca5937b2a600a02a8133" alt="" width="1280" height="646" data-path="images/customization/recorder/editor-preview.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltVideoEditorPlayerWireframe.Preview>
            <VeltVideoEditorPlayerWireframe.Preview.Loading />
            <VeltVideoEditorPlayerWireframe.Preview.Video />
        </VeltVideoEditorPlayerWireframe.Preview>
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-video-editor-player-preview-wireframe>
            <velt-video-editor-player-preview-loading-wireframe></velt-video-editor-player-preview-loading-wireframe>
            <velt-video-editor-player-preview-video-wireframe></velt-video-editor-player-preview-video-wireframe>
        </velt-video-editor-player-preview-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

#### Loading

<img src="https://mintcdn.com/velt-v6-0-0-beta-3/7XdjatzNOROMUuxp/images/customization/recorder/editor-preview-loading.png?fit=max&auto=format&n=7XdjatzNOROMUuxp&q=85&s=a839f98e7012717061b39561e5143d70" alt="" width="1280" height="646" data-path="images/customization/recorder/editor-preview-loading.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltVideoEditorPlayerWireframe.Preview.Loading />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-video-editor-player-preview-loading-wireframe></velt-video-editor-player-preview-loading-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

#### Video

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltVideoEditorPlayerWireframe.Preview.Video />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-video-editor-player-preview-video-wireframe></velt-video-editor-player-preview-video-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

### ToggleButton

<img src="https://mintcdn.com/velt-v6-0-0-beta-3/7XdjatzNOROMUuxp/images/customization/recorder/editor-toggle.png?fit=max&auto=format&n=7XdjatzNOROMUuxp&q=85&s=7f23566eba2689f86143c25a3817d113" alt="" width="1280" height="348" data-path="images/customization/recorder/editor-toggle.png" />

**Template Variables:**

| Variable               | Description                                                            |
| ---------------------- | ---------------------------------------------------------------------- |
| `isPlayingTrimPreview` | This is true when the video is playing in the preview else it is false |

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-video-editor-player-toggle-button-wireframe></velt-video-editor-player-toggle-button-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

### Time

<img src="https://mintcdn.com/velt-v6-0-0-beta-3/7XdjatzNOROMUuxp/images/customization/recorder/editor-time.png?fit=max&auto=format&n=7XdjatzNOROMUuxp&q=85&s=71b17326ea64903170bd1141228d4626" alt="" width="1280" height="348" data-path="images/customization/recorder/editor-time.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltVideoEditorPlayerWireframe.Time>
            <VeltVideoEditorPlayerWireframe.CurrentTime />
            <VeltVideoEditorPlayerWireframe.TotalTime />
        </VeltVideoEditorPlayerWireframe.Time>
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-video-editor-player-time-wireframe>
            <velt-video-editor-player-current-time-wireframe></velt-video-editor-player-current-time-wireframe>
            <velt-video-editor-player-total-time-wireframe></velt-video-editor-player-total-time-wireframe>
        </velt-video-editor-player-time-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

#### CurrentTime

<img src="https://mintcdn.com/velt-v6-0-0-beta-3/7XdjatzNOROMUuxp/images/customization/recorder/editor-time-current.png?fit=max&auto=format&n=7XdjatzNOROMUuxp&q=85&s=a5789a63af3be57486831d5b1bd42d13" alt="" width="1280" height="348" data-path="images/customization/recorder/editor-time-current.png" />

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-video-editor-player-current-time-wireframe></velt-video-editor-player-current-time-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

#### TotalTime

<img src="https://mintcdn.com/velt-v6-0-0-beta-3/7XdjatzNOROMUuxp/images/customization/recorder/editor-time-total.png?fit=max&auto=format&n=7XdjatzNOROMUuxp&q=85&s=8e1593d6be605ecaec83443e3c11db4e" alt="" width="1280" height="348" data-path="images/customization/recorder/editor-time-total.png" />

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-video-editor-player-total-time-wireframe></velt-video-editor-player-total-time-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

### SplitButton

<img src="https://mintcdn.com/velt-v6-0-0-beta-3/7XdjatzNOROMUuxp/images/customization/recorder/editor-split.png?fit=max&auto=format&n=7XdjatzNOROMUuxp&q=85&s=b12b3520487081781171845b2a5998f0" alt="" width="1280" height="348" data-path="images/customization/recorder/editor-split.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltVideoEditorPlayerWireframe.SplitButton>
            <VeltVideoEditorPlayerWireframe.CurrentTime />
        </VeltVideoEditorPlayerWireframe.SplitButton>
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-video-editor-player-split-button-wireframe>
            <velt-video-editor-player-current-time-wireframe></velt-video-editor-player-current-time-wireframe>
        </velt-video-editor-player-split-button-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

#### CurrentTime

<img src="https://mintcdn.com/velt-v6-0-0-beta-3/7XdjatzNOROMUuxp/images/customization/recorder/editor-split-current.png?fit=max&auto=format&n=7XdjatzNOROMUuxp&q=85&s=cbbc1b4b7bf41c35df85cc5bb6c92d31" alt="" width="1280" height="348" data-path="images/customization/recorder/editor-split-current.png" />

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-video-editor-player-current-time-wireframe></velt-video-editor-player-current-time-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

### DeleteButton

<img src="https://mintcdn.com/velt-v6-0-0-beta-3/7XdjatzNOROMUuxp/images/customization/recorder/editor-remove.png?fit=max&auto=format&n=7XdjatzNOROMUuxp&q=85&s=9ebac77dcf55ff28c1daf71b9cbaa9ca" alt="" width="1280" height="348" data-path="images/customization/recorder/editor-remove.png" />

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-video-editor-player-delete-button-wireframe></velt-video-editor-player-delete-button-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

### AddZoomButton

<img src="https://mintcdn.com/velt-v6-0-0-beta-3/7XdjatzNOROMUuxp/images/customization/recorder/editor-add-zoom.png?fit=max&auto=format&n=7XdjatzNOROMUuxp&q=85&s=7a6780656571ab8a826e9289b771fff7" alt="" width="1280" height="348" data-path="images/customization/recorder/editor-add-zoom.png" />

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

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-video-editor-player-add-zoom-button-wireframe></velt-video-editor-player-add-zoom-button-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

### Timeline

<img src="https://mintcdn.com/velt-v6-0-0-beta-3/7XdjatzNOROMUuxp/images/customization/recorder/editor-timeline-container-1.png?fit=max&auto=format&n=7XdjatzNOROMUuxp&q=85&s=01436d9c8798018061a919780d834c29" alt="" width="1280" height="355" data-path="images/customization/recorder/editor-timeline-container-1.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltVideoEditorPlayerWireframe.Timeline>
            <VeltVideoEditorPlayerWireframe.Timeline.BackspaceHint />
            <VeltVideoEditorPlayerWireframe.Timeline.Onboarding />
            <VeltVideoEditorPlayerWireframe.Timeline.Container />
            <VeltVideoEditorPlayerWireframe.Timeline.Marker />
        </VeltVideoEditorPlayerWireframe.Timeline>
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
      <velt-video-editor-player-timeline-wireframe>
        <velt-video-editor-player-timeline-backspace-hint-wireframe></velt-video-editor-player-timeline-backspace-hint-wireframe>
        <velt-video-editor-player-timeline-onboarding-wireframe></velt-video-editor-player-timeline-onboarding-wireframe>
        <velt-video-editor-player-timeline-container-wireframe></velt-video-editor-player-timeline-container-wireframe>
        <velt-video-editor-player-timeline-marker-wireframe></velt-video-editor-player-timeline-marker-wireframe>
      </velt-video-editor-player-timeline-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

#### BackspaceHint

<img src="https://mintcdn.com/velt-v6-0-0-beta-3/7XdjatzNOROMUuxp/images/customization/recorder/editor-timeline-backspace-hint.png?fit=max&auto=format&n=7XdjatzNOROMUuxp&q=85&s=37e564374df8700947cdacc30061f5d9" alt="" width="1280" height="309" data-path="images/customization/recorder/editor-timeline-backspace-hint.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltVideoEditorPlayerWireframe.Timeline.BackspaceHint />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-video-editor-player-timeline-backspace-hint-wireframe></velt-video-editor-player-timeline-backspace-hint-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

#### Onboarding

<img src="https://mintcdn.com/velt-v6-0-0-beta-3/7XdjatzNOROMUuxp/images/customization/recorder/editor-timeline-onboarding.png?fit=max&auto=format&n=7XdjatzNOROMUuxp&q=85&s=83d03c80992a50633268aeea83254ca4" alt="" width="1280" height="480" data-path="images/customization/recorder/editor-timeline-onboarding.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltVideoEditorPlayerWireframe.Timeline.Onboarding>
            <VeltVideoEditorPlayerWireframe.Timeline.Onboarding.Content />
            <VeltVideoEditorPlayerWireframe.Timeline.Onboarding.Text />
            <VeltVideoEditorPlayerWireframe.Timeline.Onboarding.Arrow />
        </VeltVideoEditorPlayerWireframe.Timeline.Onboarding>
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-video-editor-player-timeline-onboarding-wireframe>
          <velt-video-editor-player-timeline-onboarding-content-wireframe></velt-video-editor-player-timeline-onboarding-content-wireframe>
          <velt-video-editor-player-timeline-onboarding-text-wireframe></velt-video-editor-player-timeline-onboarding-text-wireframe>
          <velt-video-editor-player-timeline-onboarding-arrow-wireframe></velt-video-editor-player-timeline-onboarding-arrow-wireframe>
        </velt-video-editor-player-timeline-onboarding-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

##### **Content**

<img src="https://mintcdn.com/velt-v6-0-0-beta-3/7XdjatzNOROMUuxp/images/customization/recorder/editor-timeline-onboarding-content.png?fit=max&auto=format&n=7XdjatzNOROMUuxp&q=85&s=6e887d08dfd6e8982f0dba18364cc751" alt="" width="1280" height="308" data-path="images/customization/recorder/editor-timeline-onboarding-content.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltVideoEditorPlayerWireframe.Timeline.Onboarding.Content />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-video-editor-player-timeline-onboarding-content-wireframe></velt-video-editor-player-timeline-onboarding-content-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

##### **Text**

<img src="https://mintcdn.com/velt-v6-0-0-beta-3/7XdjatzNOROMUuxp/images/customization/recorder/editor-timeline-onboarding-text.png?fit=max&auto=format&n=7XdjatzNOROMUuxp&q=85&s=89db8515bf38206b4f86ceb37c0c5c76" alt="" width="1280" height="308" data-path="images/customization/recorder/editor-timeline-onboarding-text.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltVideoEditorPlayerWireframe.Timeline.Onboarding.Text>
            <VeltVideoEditorPlayerWireframe.Timeline.Onboarding.Text.Title />
            <VeltVideoEditorPlayerWireframe.Timeline.Onboarding.Text.Description />
        </VeltVideoEditorPlayerWireframe.Timeline.Onboarding.Text>
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-video-editor-player-timeline-onboarding-text-wireframe>
            <velt-video-editor-player-timeline-onboarding-text-title-wireframe></velt-video-editor-player-timeline-onboarding-text-title-wireframe>
            <velt-video-editor-player-timeline-onboarding-text-description-wireframe></velt-video-editor-player-timeline-onboarding-text-description-wireframe>
        </velt-video-editor-player-timeline-onboarding-text-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

###### **Title**

<img src="https://mintcdn.com/velt-v6-0-0-beta-3/7XdjatzNOROMUuxp/images/customization/recorder/editor-timeline-onboarding-text-title.png?fit=max&auto=format&n=7XdjatzNOROMUuxp&q=85&s=abf286d188f7f9f6dd6ca5980f720420" alt="" width="1280" height="308" data-path="images/customization/recorder/editor-timeline-onboarding-text-title.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltVideoEditorPlayerWireframe.Timeline.Onboarding.Text.Title />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-video-editor-player-timeline-onboarding-text-title-wireframe></velt-video-editor-player-timeline-onboarding-text-title-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

###### **Description**

<img src="https://mintcdn.com/velt-v6-0-0-beta-3/7XdjatzNOROMUuxp/images/customization/recorder/editor-timeline-onboarding-text-description.png?fit=max&auto=format&n=7XdjatzNOROMUuxp&q=85&s=bdb2bd702309992d1b65bd67759fed46" alt="" width="1280" height="308" data-path="images/customization/recorder/editor-timeline-onboarding-text-description.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltVideoEditorPlayerWireframe.Timeline.Onboarding.Text.Description />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-video-editor-player-timeline-onboarding-text-description-wireframe></velt-video-editor-player-timeline-onboarding-text-description-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

##### **Arrow**

<img src="https://mintcdn.com/velt-v6-0-0-beta-3/7XdjatzNOROMUuxp/images/customization/recorder/editor-timeline-onboarding-arrow.png?fit=max&auto=format&n=7XdjatzNOROMUuxp&q=85&s=d7098df2fda91a5a05fe5fc948df1dea" alt="" width="1280" height="308" data-path="images/customization/recorder/editor-timeline-onboarding-arrow.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltVideoEditorPlayerWireframe.Timeline.Onboarding.Arrow />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-video-editor-player-timeline-onboarding-arrow-wireframe></velt-video-editor-player-timeline-onboarding-arrow-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

#### Container

<img src="https://mintcdn.com/velt-v6-0-0-beta-3/7XdjatzNOROMUuxp/images/customization/recorder/editor-timeline-container.png?fit=max&auto=format&n=7XdjatzNOROMUuxp&q=85&s=ccd8b9cff2882e34b038b2fc11f8f548" alt="" width="1280" height="286" data-path="images/customization/recorder/editor-timeline-container.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltVideoEditorPlayerWireframe.Timeline.Container>
            <VeltVideoEditorPlayerWireframe.Timeline.Playhead />
            <VeltVideoEditorPlayerWireframe.Timeline.Trim />
            <VeltVideoEditorPlayerWireframe.Timeline.Scale />
        </VeltVideoEditorPlayerWireframe.Timeline.Container>
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-video-editor-player-timeline-container-wireframe>
            <velt-video-editor-player-timeline-playhead-wireframe></velt-video-editor-player-timeline-playhead-wireframe>
            <velt-video-editor-player-timeline-trim-wireframe></velt-video-editor-player-timeline-trim-wireframe>
            <velt-video-editor-player-timeline-scale-wireframe></velt-video-editor-player-timeline-scale-wireframe>
        </velt-video-editor-player-timeline-container-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

##### **Playhead**

<img src="https://mintcdn.com/velt-v6-0-0-beta-3/7XdjatzNOROMUuxp/images/customization/recorder/editor-timeline-container-playhead.png?fit=max&auto=format&n=7XdjatzNOROMUuxp&q=85&s=a82e4c84642b6ce68c605195e2d39932" alt="" width="1280" height="417" data-path="images/customization/recorder/editor-timeline-container-playhead.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltVideoEditorPlayerWireframe.Timeline.Playhead>
            <VeltVideoEditorPlayerWireframe.Timeline.Playhead.Line />
            <VeltVideoEditorPlayerWireframe.Timeline.Playhead.Actions />
        </VeltVideoEditorPlayerWireframe.Timeline.Playhead>
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-video-editor-player-timeline-playhead-wireframe>
            <velt-video-editor-player-timeline-playhead-line-wireframe></velt-video-editor-player-timeline-playhead-line-wireframe>
            <velt-video-editor-player-timeline-playhead-actions-wireframe></velt-video-editor-player-timeline-playhead-actions-wireframe>
        </velt-video-editor-player-timeline-playhead-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

###### **Line**

<img src="https://mintcdn.com/velt-v6-0-0-beta-3/7XdjatzNOROMUuxp/images/customization/recorder/editor-timeline-container-playhead-line.png?fit=max&auto=format&n=7XdjatzNOROMUuxp&q=85&s=13c3922bb324e4dcf181ebce1e462d85" alt="" width="1280" height="286" data-path="images/customization/recorder/editor-timeline-container-playhead-line.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltVideoEditorPlayerWireframe.Timeline.Playhead.Line />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-video-editor-player-timeline-playhead-line-wireframe></velt-video-editor-player-timeline-playhead-line-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

###### **Actions**

<img src="https://mintcdn.com/velt-v6-0-0-beta-3/7XdjatzNOROMUuxp/images/customization/recorder/editor-timeline-container-playhead-actions.png?fit=max&auto=format&n=7XdjatzNOROMUuxp&q=85&s=4e10a33cd7bc0f87024fd78f41c7602c" alt="" width="1280" height="318" data-path="images/customization/recorder/editor-timeline-container-playhead-actions.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltVideoEditorPlayerWireframe.Timeline.Playhead.Actions />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-video-editor-player-timeline-playhead-actions-wireframe></velt-video-editor-player-timeline-playhead-actions-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

##### **Trim**

<img src="https://mintcdn.com/velt-v6-0-0-beta-3/7XdjatzNOROMUuxp/images/customization/recorder/editor-timeline-container-trim.png?fit=max&auto=format&n=7XdjatzNOROMUuxp&q=85&s=a5fbe3d7d5beb4b56c5b667420bdc9a0" alt="" width="1280" height="286" data-path="images/customization/recorder/editor-timeline-container-trim.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltVideoEditorPlayerWireframe.Timeline.Trim />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-video-editor-player-timeline-trim-wireframe></velt-video-editor-player-timeline-trim-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

##### **Scale**

<img src="https://mintcdn.com/velt-v6-0-0-beta-3/7XdjatzNOROMUuxp/images/customization/recorder/editor-timeline-container-scale.png?fit=max&auto=format&n=7XdjatzNOROMUuxp&q=85&s=865e978757f4f1275b77b0d8a70076d4" alt="" width="1280" height="286" data-path="images/customization/recorder/editor-timeline-container-scale.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltVideoEditorPlayerWireframe.Timeline.Scale>
            <VeltVideoEditorPlayerWireframe.Timeline.Scale.ZoomButton />
        </VeltVideoEditorPlayerWireframe.Timeline.Scale>
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-video-editor-player-timeline-scale-wireframe>
            <velt-video-editor-player-zoom-button-wireframe></velt-video-editor-player-zoom-button-wireframe>
        </velt-video-editor-player-timeline-scale-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

###### **ZoomButton**

<img src="https://mintcdn.com/velt-v6-0-0-beta-3/7XdjatzNOROMUuxp/images/customization/recorder/editor-timeline-container-scale-zoom.png?fit=max&auto=format&n=7XdjatzNOROMUuxp&q=85&s=c299c5cc3234eafde90ab33ad8a8d3e3" alt="" width="1280" height="429" data-path="images/customization/recorder/editor-timeline-container-scale-zoom.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltVideoEditorPlayerWireframe.Timeline.Scale.ZoomButton>
            <VeltVideoEditorPlayerWireframe.Timeline.Scale.ZoomButton.Trigger />
            <VeltVideoEditorPlayerWireframe.Timeline.Scale.ZoomButton.Options />
        </VeltVideoEditorPlayerWireframe.Timeline.Scale.ZoomButton>
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-video-editor-player-zoom-button-wireframe>
            <velt-video-editor-player-zoom-button-trigger-wireframe></velt-video-editor-player-zoom-button-trigger-wireframe>
            <velt-video-editor-player-zoom-button-options-wireframe></velt-video-editor-player-zoom-button-options-wireframe>
        </velt-video-editor-player-zoom-button-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

###### **Trigger**

<img src="https://mintcdn.com/velt-v6-0-0-beta-3/7XdjatzNOROMUuxp/images/customization/recorder/editor-timeline-container-scale-zoom-trigger.png?fit=max&auto=format&n=7XdjatzNOROMUuxp&q=85&s=f84613f8a16579616e918123b20ef643" alt="" width="1280" height="234" data-path="images/customization/recorder/editor-timeline-container-scale-zoom-trigger.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltVideoEditorPlayerWireframe.Timeline.Scale.ZoomButton.Trigger />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-video-editor-player-zoom-button-trigger-wireframe></velt-video-editor-player-zoom-button-trigger-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

###### **Options**

<img src="https://mintcdn.com/velt-v6-0-0-beta-3/7XdjatzNOROMUuxp/images/customization/recorder/editor-timeline-container-scale-zoom-options.png?fit=max&auto=format&n=7XdjatzNOROMUuxp&q=85&s=8693fe7edc11e1f533dbf96e52317f78" alt="" width="1280" height="429" data-path="images/customization/recorder/editor-timeline-container-scale-zoom-options.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltVideoEditorPlayerWireframe.Timeline.Scale.ZoomButton.Options>
            <VeltVideoEditorPlayerWireframe.Timeline.Scale.ZoomButton.Options.List />
            <VeltVideoEditorPlayerWireframe.Timeline.Scale.ZoomButton.Options.Input />
        </VeltVideoEditorPlayerWireframe.Timeline.Scale.ZoomButton.Options>
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-video-editor-player-zoom-button-options-wireframe>
            <velt-video-editor-player-zoom-button-options-input-wireframe></velt-video-editor-player-zoom-button-options-input-wireframe>
            <velt-video-editor-player-zoom-button-options-list-wireframe></velt-video-editor-player-zoom-button-options-list-wireframe>
        </velt-video-editor-player-zoom-button-options-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

###### **List**

<img src="https://mintcdn.com/velt-v6-0-0-beta-3/7XdjatzNOROMUuxp/images/customization/recorder/editor-timeline-container-scale-zoom-options-list.png?fit=max&auto=format&n=7XdjatzNOROMUuxp&q=85&s=9dfdba1333d74e3993c58910cd1930de" alt="" width="1280" height="429" data-path="images/customization/recorder/editor-timeline-container-scale-zoom-options-list.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltVideoEditorPlayerWireframe.Timeline.Scale.ZoomButton.Options.List>
            <VeltVideoEditorPlayerWireframe.Timeline.Scale.ZoomButton.Options.List.Item />
        </VeltVideoEditorPlayerWireframe.Timeline.Scale.ZoomButton.Options.List>
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-video-editor-player-zoom-button-options-list-wireframe>
            <velt-video-editor-player-zoom-button-options-list-item-wireframe></velt-video-editor-player-zoom-button-options-list-item-wireframe>
        </velt-video-editor-player-zoom-button-options-list-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

###### **Item**

<img src="https://mintcdn.com/velt-v6-0-0-beta-3/7XdjatzNOROMUuxp/images/customization/recorder/editor-timeline-container-scale-zoom-option-list-item.png?fit=max&auto=format&n=7XdjatzNOROMUuxp&q=85&s=ba978eb3fc73ce47bca9480a4bd1531c" alt="" width="1280" height="429" data-path="images/customization/recorder/editor-timeline-container-scale-zoom-option-list-item.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltVideoEditorPlayerWireframe.Timeline.Scale.ZoomButton.Options.List.Item />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-video-editor-player-zoom-button-options-list-item-wireframe></velt-video-editor-player-zoom-button-options-list-item-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

###### **Input**

<img src="https://mintcdn.com/velt-v6-0-0-beta-3/7XdjatzNOROMUuxp/images/customization/recorder/editor-timeline-container-scale-zoom-options-1.png?fit=max&auto=format&n=7XdjatzNOROMUuxp&q=85&s=690cedaef026ae3c8052026d9008aaf3" alt="" width="1280" height="429" data-path="images/customization/recorder/editor-timeline-container-scale-zoom-options-1.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltVideoEditorPlayerWireframe.Timeline.Scale.ZoomButton.Options.Input />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-video-editor-player-zoom-button-options-input-wireframe></velt-video-editor-player-zoom-button-options-input-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>

#### Marker

<img src="https://mintcdn.com/velt-v6-0-0-beta-3/7XdjatzNOROMUuxp/images/customization/recorder/editor-timeline-container-marker.png?fit=max&auto=format&n=7XdjatzNOROMUuxp&q=85&s=c3886ead85f7c1547475cada01b2c443" alt="" width="1280" height="210" data-path="images/customization/recorder/editor-timeline-container-marker.png" />

<Tabs>
  <Tab title="React / Next.js">
    ```jsx theme={null}
    <VeltWireframe>
        <VeltVideoEditorPlayerWireframe.Timeline.Marker />
    </VeltWireframe>
    ```
  </Tab>

  <Tab title="Other Frameworks">
    ```html theme={null}
    <velt-wireframe style="display:none;">
        <velt-video-editor-player-timeline-marker-wireframe></velt-video-editor-player-timeline-marker-wireframe>
    </velt-wireframe>
    ```
  </Tab>
</Tabs>
