> ## Documentation Index
> Fetch the complete documentation index at: https://velt-mintlify-21cab773.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-mintlify-21cab773/zfGXCV1iniNIg8ug/images/customization/recorder/editor-overview.png?fit=max&auto=format&n=zfGXCV1iniNIg8ug&q=85&s=6e749df529a2b8f10cce19d6fb345c0c" 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-mintlify-21cab773/zfGXCV1iniNIg8ug/images/customization/recorder/editor-title.png?fit=max&auto=format&n=zfGXCV1iniNIg8ug&q=85&s=c84b8bda249dec897cd8decf9115d1dc" 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-mintlify-21cab773/zfGXCV1iniNIg8ug/images/customization/recorder/editor-apply.png?fit=max&auto=format&n=zfGXCV1iniNIg8ug&q=85&s=4747d6c2a3b9c4c3eef52013c1d7f19a" 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-mintlify-21cab773/zfGXCV1iniNIg8ug/images/customization/recorder/editor-apply-loading.png?fit=max&auto=format&n=zfGXCV1iniNIg8ug&q=85&s=eba1ef8a1191b646faef4cff041801f1" 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-mintlify-21cab773/zfGXCV1iniNIg8ug/images/customization/recorder/editor-retake.png?fit=max&auto=format&n=zfGXCV1iniNIg8ug&q=85&s=3bf734eb2a13f63ef03081afd8fff48b" 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-mintlify-21cab773/zfGXCV1iniNIg8ug/images/customization/recorder/editor-download.png?fit=max&auto=format&n=zfGXCV1iniNIg8ug&q=85&s=eab7548e57cc39bc30c49b9d67ca9a3d" 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-mintlify-21cab773/zfGXCV1iniNIg8ug/images/customization/recorder/editor-close.png?fit=max&auto=format&n=zfGXCV1iniNIg8ug&q=85&s=967f565568703a5a9f319ec069394e0e" 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-mintlify-21cab773/zfGXCV1iniNIg8ug/images/customization/recorder/editor-preview.png?fit=max&auto=format&n=zfGXCV1iniNIg8ug&q=85&s=9e123008785970ceddd07083ae058005" 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-mintlify-21cab773/zfGXCV1iniNIg8ug/images/customization/recorder/editor-preview-loading.png?fit=max&auto=format&n=zfGXCV1iniNIg8ug&q=85&s=2e6df716166418ef0dd9d5a083ca4bb7" 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-mintlify-21cab773/zfGXCV1iniNIg8ug/images/customization/recorder/editor-toggle.png?fit=max&auto=format&n=zfGXCV1iniNIg8ug&q=85&s=a4966009296965149fa2ee2003889dd1" 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-mintlify-21cab773/zfGXCV1iniNIg8ug/images/customization/recorder/editor-time.png?fit=max&auto=format&n=zfGXCV1iniNIg8ug&q=85&s=6c6ed9e8c3517e265f176fbbfb9575a4" 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-mintlify-21cab773/zfGXCV1iniNIg8ug/images/customization/recorder/editor-time-current.png?fit=max&auto=format&n=zfGXCV1iniNIg8ug&q=85&s=287854ead0afbc51dfa5370c4c664424" 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-mintlify-21cab773/zfGXCV1iniNIg8ug/images/customization/recorder/editor-time-total.png?fit=max&auto=format&n=zfGXCV1iniNIg8ug&q=85&s=c5dda16629e75dc7afe5032495c12e93" 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-mintlify-21cab773/zfGXCV1iniNIg8ug/images/customization/recorder/editor-split.png?fit=max&auto=format&n=zfGXCV1iniNIg8ug&q=85&s=49bddbdf19cccd461baa314533d6a461" 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-mintlify-21cab773/zfGXCV1iniNIg8ug/images/customization/recorder/editor-split-current.png?fit=max&auto=format&n=zfGXCV1iniNIg8ug&q=85&s=ff5fbb1de1fa7f924792671042376ee5" 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-mintlify-21cab773/zfGXCV1iniNIg8ug/images/customization/recorder/editor-remove.png?fit=max&auto=format&n=zfGXCV1iniNIg8ug&q=85&s=336f51390a8d8d9ac1129e21ce5ed799" 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-mintlify-21cab773/zfGXCV1iniNIg8ug/images/customization/recorder/editor-add-zoom.png?fit=max&auto=format&n=zfGXCV1iniNIg8ug&q=85&s=a8842ab7c224666822f91a2ff983a198" 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-mintlify-21cab773/zfGXCV1iniNIg8ug/images/customization/recorder/editor-timeline-container-1.png?fit=max&auto=format&n=zfGXCV1iniNIg8ug&q=85&s=58b54c15b65c073c8000cb87bfba5804" 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-mintlify-21cab773/zfGXCV1iniNIg8ug/images/customization/recorder/editor-timeline-backspace-hint.png?fit=max&auto=format&n=zfGXCV1iniNIg8ug&q=85&s=6170122637086363a54c46d9d1a300dc" 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-mintlify-21cab773/zfGXCV1iniNIg8ug/images/customization/recorder/editor-timeline-onboarding.png?fit=max&auto=format&n=zfGXCV1iniNIg8ug&q=85&s=b764482c1a0c9040b920eedc3eefadf8" 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-mintlify-21cab773/zfGXCV1iniNIg8ug/images/customization/recorder/editor-timeline-onboarding-content.png?fit=max&auto=format&n=zfGXCV1iniNIg8ug&q=85&s=756d46cd738fbcf316f98fddbd490730" 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-mintlify-21cab773/zfGXCV1iniNIg8ug/images/customization/recorder/editor-timeline-onboarding-text.png?fit=max&auto=format&n=zfGXCV1iniNIg8ug&q=85&s=dda2e58cbb7f3617b84784d50751ec47" 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-mintlify-21cab773/zfGXCV1iniNIg8ug/images/customization/recorder/editor-timeline-onboarding-text-title.png?fit=max&auto=format&n=zfGXCV1iniNIg8ug&q=85&s=936949b8c603e3291a5e61555cbb71c9" 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-mintlify-21cab773/zfGXCV1iniNIg8ug/images/customization/recorder/editor-timeline-onboarding-text-description.png?fit=max&auto=format&n=zfGXCV1iniNIg8ug&q=85&s=1de5a4303637cef85742e163fc31c413" 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-mintlify-21cab773/zfGXCV1iniNIg8ug/images/customization/recorder/editor-timeline-onboarding-arrow.png?fit=max&auto=format&n=zfGXCV1iniNIg8ug&q=85&s=bd5418cb982bc4ebd15778547bad2230" 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-mintlify-21cab773/zfGXCV1iniNIg8ug/images/customization/recorder/editor-timeline-container.png?fit=max&auto=format&n=zfGXCV1iniNIg8ug&q=85&s=5d5993009c303e69c5fece1e1a1f0670" 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-mintlify-21cab773/zfGXCV1iniNIg8ug/images/customization/recorder/editor-timeline-container-playhead.png?fit=max&auto=format&n=zfGXCV1iniNIg8ug&q=85&s=fe6d82b823aab88fb10575f69a5743a6" 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-mintlify-21cab773/zfGXCV1iniNIg8ug/images/customization/recorder/editor-timeline-container-playhead-line.png?fit=max&auto=format&n=zfGXCV1iniNIg8ug&q=85&s=ddc83a52fb36e88d5553413d4a5ac9ce" 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-mintlify-21cab773/zfGXCV1iniNIg8ug/images/customization/recorder/editor-timeline-container-playhead-actions.png?fit=max&auto=format&n=zfGXCV1iniNIg8ug&q=85&s=77bfb71bcd84eb70ba49fd52546915dd" 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-mintlify-21cab773/zfGXCV1iniNIg8ug/images/customization/recorder/editor-timeline-container-trim.png?fit=max&auto=format&n=zfGXCV1iniNIg8ug&q=85&s=5a4a40e6b2c3bf3662bf250559391d20" 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-mintlify-21cab773/zfGXCV1iniNIg8ug/images/customization/recorder/editor-timeline-container-scale.png?fit=max&auto=format&n=zfGXCV1iniNIg8ug&q=85&s=2198f7585f1489c810d021f991cbb568" 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-mintlify-21cab773/zfGXCV1iniNIg8ug/images/customization/recorder/editor-timeline-container-scale-zoom.png?fit=max&auto=format&n=zfGXCV1iniNIg8ug&q=85&s=263d05909a35a66c8097a72f9ecd9622" 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-mintlify-21cab773/zfGXCV1iniNIg8ug/images/customization/recorder/editor-timeline-container-scale-zoom-trigger.png?fit=max&auto=format&n=zfGXCV1iniNIg8ug&q=85&s=9e0406e07c2fc7af53eebb2117d31155" 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-mintlify-21cab773/zfGXCV1iniNIg8ug/images/customization/recorder/editor-timeline-container-scale-zoom-options.png?fit=max&auto=format&n=zfGXCV1iniNIg8ug&q=85&s=794f6f85f57a1d3e8e7ea28b1d7d0ebb" 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-mintlify-21cab773/zfGXCV1iniNIg8ug/images/customization/recorder/editor-timeline-container-scale-zoom-options-list.png?fit=max&auto=format&n=zfGXCV1iniNIg8ug&q=85&s=1d7aa0e2eb6a782773fa4802f5220d67" 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-mintlify-21cab773/zfGXCV1iniNIg8ug/images/customization/recorder/editor-timeline-container-scale-zoom-option-list-item.png?fit=max&auto=format&n=zfGXCV1iniNIg8ug&q=85&s=f90bf2349f8a40e118d484efd13b341b" 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-mintlify-21cab773/zfGXCV1iniNIg8ug/images/customization/recorder/editor-timeline-container-scale-zoom-options-1.png?fit=max&auto=format&n=zfGXCV1iniNIg8ug&q=85&s=58483e1258ddc7c09c94b84628e9cc2a" 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-mintlify-21cab773/zfGXCV1iniNIg8ug/images/customization/recorder/editor-timeline-container-marker.png?fit=max&auto=format&n=zfGXCV1iniNIg8ug&q=85&s=2db20c88abdd9c2b50939af1c024af21" 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>
