> ## Documentation Index
> Fetch the complete documentation index at: https://velt-v6-0-0-beta-6.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-6/WtgH-sf_kgjzjQt1/images/customization/recorder/editor-overview.png?fit=max&auto=format&n=WtgH-sf_kgjzjQt1&q=85&s=bbf571c55b90842ca8e6ced813d90958" 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-6/WtgH-sf_kgjzjQt1/images/customization/recorder/editor-title.png?fit=max&auto=format&n=WtgH-sf_kgjzjQt1&q=85&s=152a0662732b61aa516b9238ee18c0a5" 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-6/WtgH-sf_kgjzjQt1/images/customization/recorder/editor-apply.png?fit=max&auto=format&n=WtgH-sf_kgjzjQt1&q=85&s=2af6bd3e5ecb292cf1a8b13efe7fa99f" 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-6/WtgH-sf_kgjzjQt1/images/customization/recorder/editor-apply-loading.png?fit=max&auto=format&n=WtgH-sf_kgjzjQt1&q=85&s=ba043c44de9eab35eff437a1f96b39bb" 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-6/WtgH-sf_kgjzjQt1/images/customization/recorder/editor-retake.png?fit=max&auto=format&n=WtgH-sf_kgjzjQt1&q=85&s=822460fdda49027ead8a029ef978bea8" 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-6/WtgH-sf_kgjzjQt1/images/customization/recorder/editor-download.png?fit=max&auto=format&n=WtgH-sf_kgjzjQt1&q=85&s=a0a09edb0b43e9851fa668bee53ecd19" 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-6/WtgH-sf_kgjzjQt1/images/customization/recorder/editor-close.png?fit=max&auto=format&n=WtgH-sf_kgjzjQt1&q=85&s=a8b11346ec26cc30668e57549abc39eb" 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-6/WtgH-sf_kgjzjQt1/images/customization/recorder/editor-preview.png?fit=max&auto=format&n=WtgH-sf_kgjzjQt1&q=85&s=371457240f142701b361873db03d89f5" 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-6/WtgH-sf_kgjzjQt1/images/customization/recorder/editor-preview-loading.png?fit=max&auto=format&n=WtgH-sf_kgjzjQt1&q=85&s=c59ee4c06b589594fac7b4406530d378" 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-6/WtgH-sf_kgjzjQt1/images/customization/recorder/editor-toggle.png?fit=max&auto=format&n=WtgH-sf_kgjzjQt1&q=85&s=c369252421dcda6eef17fa67a008d5fe" 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-6/WtgH-sf_kgjzjQt1/images/customization/recorder/editor-time.png?fit=max&auto=format&n=WtgH-sf_kgjzjQt1&q=85&s=de959ad1452747a651526eff0c23a542" 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-6/WtgH-sf_kgjzjQt1/images/customization/recorder/editor-time-current.png?fit=max&auto=format&n=WtgH-sf_kgjzjQt1&q=85&s=0c3e58fdea6bbf19445a49d35ce6a694" 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-6/WtgH-sf_kgjzjQt1/images/customization/recorder/editor-time-total.png?fit=max&auto=format&n=WtgH-sf_kgjzjQt1&q=85&s=5589329d9b4cb39a93619c03c79bf3e7" 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-6/WtgH-sf_kgjzjQt1/images/customization/recorder/editor-split.png?fit=max&auto=format&n=WtgH-sf_kgjzjQt1&q=85&s=6008115c5996bf5f592b55994fc4012b" 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-6/WtgH-sf_kgjzjQt1/images/customization/recorder/editor-split-current.png?fit=max&auto=format&n=WtgH-sf_kgjzjQt1&q=85&s=8c74cfbe9662dacbbe63268d288e7ee0" 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-6/WtgH-sf_kgjzjQt1/images/customization/recorder/editor-remove.png?fit=max&auto=format&n=WtgH-sf_kgjzjQt1&q=85&s=1cb8ae95ece8b974095a5964c1a94281" 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-6/WtgH-sf_kgjzjQt1/images/customization/recorder/editor-add-zoom.png?fit=max&auto=format&n=WtgH-sf_kgjzjQt1&q=85&s=6c123691b7f54c9e88983167b03f187e" 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-6/WtgH-sf_kgjzjQt1/images/customization/recorder/editor-timeline-container-1.png?fit=max&auto=format&n=WtgH-sf_kgjzjQt1&q=85&s=bc0faacc3a6369c1cbcc9f49398ec713" 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-6/WtgH-sf_kgjzjQt1/images/customization/recorder/editor-timeline-backspace-hint.png?fit=max&auto=format&n=WtgH-sf_kgjzjQt1&q=85&s=87539f8a9a39db16e44f5ebac84152fd" 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-6/WtgH-sf_kgjzjQt1/images/customization/recorder/editor-timeline-onboarding.png?fit=max&auto=format&n=WtgH-sf_kgjzjQt1&q=85&s=0e3ab62f15b11f5bbbadc06c9c4a8776" 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-6/WtgH-sf_kgjzjQt1/images/customization/recorder/editor-timeline-onboarding-content.png?fit=max&auto=format&n=WtgH-sf_kgjzjQt1&q=85&s=98da0f0a6fdfcc33290c87784e8af24c" 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-6/WtgH-sf_kgjzjQt1/images/customization/recorder/editor-timeline-onboarding-text.png?fit=max&auto=format&n=WtgH-sf_kgjzjQt1&q=85&s=a807adcb08d5ea32f128ed6a9c73466c" 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-6/WtgH-sf_kgjzjQt1/images/customization/recorder/editor-timeline-onboarding-text-title.png?fit=max&auto=format&n=WtgH-sf_kgjzjQt1&q=85&s=3c557df998524aa593a9c02cd2362882" 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-6/WtgH-sf_kgjzjQt1/images/customization/recorder/editor-timeline-onboarding-text-description.png?fit=max&auto=format&n=WtgH-sf_kgjzjQt1&q=85&s=04d2dc5e74f6ae36c843db899e89af45" 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-6/WtgH-sf_kgjzjQt1/images/customization/recorder/editor-timeline-onboarding-arrow.png?fit=max&auto=format&n=WtgH-sf_kgjzjQt1&q=85&s=fca0e616a4c3367cb0870779a66b6fb0" 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-6/WtgH-sf_kgjzjQt1/images/customization/recorder/editor-timeline-container.png?fit=max&auto=format&n=WtgH-sf_kgjzjQt1&q=85&s=3bdcf39e2b8f099f2fcf60862912822a" 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-6/WtgH-sf_kgjzjQt1/images/customization/recorder/editor-timeline-container-playhead.png?fit=max&auto=format&n=WtgH-sf_kgjzjQt1&q=85&s=7ee5503a038de304c7ea6d9056a6b71b" 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-6/WtgH-sf_kgjzjQt1/images/customization/recorder/editor-timeline-container-playhead-line.png?fit=max&auto=format&n=WtgH-sf_kgjzjQt1&q=85&s=49dde7feb1fd07a27db326b5b740431b" 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-6/WtgH-sf_kgjzjQt1/images/customization/recorder/editor-timeline-container-playhead-actions.png?fit=max&auto=format&n=WtgH-sf_kgjzjQt1&q=85&s=695c1b3dac9c1e0913c88168e76b1972" 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-6/WtgH-sf_kgjzjQt1/images/customization/recorder/editor-timeline-container-trim.png?fit=max&auto=format&n=WtgH-sf_kgjzjQt1&q=85&s=eda08e860d4afc915703aeb3b7f362a3" 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-6/WtgH-sf_kgjzjQt1/images/customization/recorder/editor-timeline-container-scale.png?fit=max&auto=format&n=WtgH-sf_kgjzjQt1&q=85&s=fb9930de221e8de4313cbeaa20a8bff6" 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-6/WtgH-sf_kgjzjQt1/images/customization/recorder/editor-timeline-container-scale-zoom.png?fit=max&auto=format&n=WtgH-sf_kgjzjQt1&q=85&s=ec09fdfeeeb8fc7617aa648294d66432" 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-6/WtgH-sf_kgjzjQt1/images/customization/recorder/editor-timeline-container-scale-zoom-trigger.png?fit=max&auto=format&n=WtgH-sf_kgjzjQt1&q=85&s=951c83ce450ec93b6211ba7597670088" 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-6/WtgH-sf_kgjzjQt1/images/customization/recorder/editor-timeline-container-scale-zoom-options.png?fit=max&auto=format&n=WtgH-sf_kgjzjQt1&q=85&s=5d29d10401b166c80d1b4f1ba02b1984" 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-6/WtgH-sf_kgjzjQt1/images/customization/recorder/editor-timeline-container-scale-zoom-options-list.png?fit=max&auto=format&n=WtgH-sf_kgjzjQt1&q=85&s=3bc77887209ffa34b8c288b39fa8216a" 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-6/WtgH-sf_kgjzjQt1/images/customization/recorder/editor-timeline-container-scale-zoom-option-list-item.png?fit=max&auto=format&n=WtgH-sf_kgjzjQt1&q=85&s=52aa67e31606ab93a8bf508a3eed0bf9" 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-6/WtgH-sf_kgjzjQt1/images/customization/recorder/editor-timeline-container-scale-zoom-options-1.png?fit=max&auto=format&n=WtgH-sf_kgjzjQt1&q=85&s=a3b3fcf4936189a06f7651d667eaf831" 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-6/WtgH-sf_kgjzjQt1/images/customization/recorder/editor-timeline-container-marker.png?fit=max&auto=format&n=WtgH-sf_kgjzjQt1&q=85&s=8ebeaabd644fa8c5baa826cc1b2e4951" 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>
