> ## Documentation Index
> Fetch the complete documentation index at: https://velt-mintlify-f7070a3a.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-f7070a3a/7xmQD2Al7Z6_kVvl/images/customization/recorder/editor-overview.png?fit=max&auto=format&n=7xmQD2Al7Z6_kVvl&q=85&s=d3e8873cf8b25029632b239ea053e520" 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-f7070a3a/7xmQD2Al7Z6_kVvl/images/customization/recorder/editor-title.png?fit=max&auto=format&n=7xmQD2Al7Z6_kVvl&q=85&s=3cbf4d5f2815b0c3a6fa0b691e17a205" 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-f7070a3a/7xmQD2Al7Z6_kVvl/images/customization/recorder/editor-apply.png?fit=max&auto=format&n=7xmQD2Al7Z6_kVvl&q=85&s=7c1a57ede24159b49e04abfc3085c2f8" 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-f7070a3a/7xmQD2Al7Z6_kVvl/images/customization/recorder/editor-apply-loading.png?fit=max&auto=format&n=7xmQD2Al7Z6_kVvl&q=85&s=d48133124a787b5807a922d4daddfd7f" 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-f7070a3a/7xmQD2Al7Z6_kVvl/images/customization/recorder/editor-retake.png?fit=max&auto=format&n=7xmQD2Al7Z6_kVvl&q=85&s=e905b461eb978b74e7b953a077df8bd0" 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-f7070a3a/7xmQD2Al7Z6_kVvl/images/customization/recorder/editor-download.png?fit=max&auto=format&n=7xmQD2Al7Z6_kVvl&q=85&s=97561cfe4183f0d6f237ece5925eb6fb" 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-f7070a3a/7xmQD2Al7Z6_kVvl/images/customization/recorder/editor-close.png?fit=max&auto=format&n=7xmQD2Al7Z6_kVvl&q=85&s=c6e2091b80b4cb2d738e885a2ae94685" 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-f7070a3a/7xmQD2Al7Z6_kVvl/images/customization/recorder/editor-preview.png?fit=max&auto=format&n=7xmQD2Al7Z6_kVvl&q=85&s=0ee203cd77b844e88b66f202737215f9" 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-f7070a3a/7xmQD2Al7Z6_kVvl/images/customization/recorder/editor-preview-loading.png?fit=max&auto=format&n=7xmQD2Al7Z6_kVvl&q=85&s=9797474ba18d0c480cfc176a28019b69" 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-f7070a3a/7xmQD2Al7Z6_kVvl/images/customization/recorder/editor-toggle.png?fit=max&auto=format&n=7xmQD2Al7Z6_kVvl&q=85&s=5881a79665b12fd9acd7f36d7c8d6281" 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-f7070a3a/7xmQD2Al7Z6_kVvl/images/customization/recorder/editor-time.png?fit=max&auto=format&n=7xmQD2Al7Z6_kVvl&q=85&s=d114ffe8037cb78158f95dd26653eccf" 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-f7070a3a/7xmQD2Al7Z6_kVvl/images/customization/recorder/editor-time-current.png?fit=max&auto=format&n=7xmQD2Al7Z6_kVvl&q=85&s=f5e8c7ad9e2e237a25696d189d94c2ba" 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-f7070a3a/7xmQD2Al7Z6_kVvl/images/customization/recorder/editor-time-total.png?fit=max&auto=format&n=7xmQD2Al7Z6_kVvl&q=85&s=d68d27d95d5f2595acc5a5acc9964705" 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-f7070a3a/7xmQD2Al7Z6_kVvl/images/customization/recorder/editor-split.png?fit=max&auto=format&n=7xmQD2Al7Z6_kVvl&q=85&s=83d8f1ba3b8038275afff66d8f44088b" 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-f7070a3a/7xmQD2Al7Z6_kVvl/images/customization/recorder/editor-split-current.png?fit=max&auto=format&n=7xmQD2Al7Z6_kVvl&q=85&s=52ee652bbd6d317884577ebb5fdea571" 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-f7070a3a/7xmQD2Al7Z6_kVvl/images/customization/recorder/editor-remove.png?fit=max&auto=format&n=7xmQD2Al7Z6_kVvl&q=85&s=bc52dc02835b0b36b21a4c3d9f9665ad" 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-f7070a3a/7xmQD2Al7Z6_kVvl/images/customization/recorder/editor-add-zoom.png?fit=max&auto=format&n=7xmQD2Al7Z6_kVvl&q=85&s=4fba6e654a244f8c6448216b3df2bdc8" 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-f7070a3a/7xmQD2Al7Z6_kVvl/images/customization/recorder/editor-timeline-container-1.png?fit=max&auto=format&n=7xmQD2Al7Z6_kVvl&q=85&s=4b87f87759a33d051ded327bf5a9a1db" 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-f7070a3a/7xmQD2Al7Z6_kVvl/images/customization/recorder/editor-timeline-backspace-hint.png?fit=max&auto=format&n=7xmQD2Al7Z6_kVvl&q=85&s=1a590fcd0169e1013a75716a5941aa58" 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-f7070a3a/7xmQD2Al7Z6_kVvl/images/customization/recorder/editor-timeline-onboarding.png?fit=max&auto=format&n=7xmQD2Al7Z6_kVvl&q=85&s=e21fbb352bc8f888736992501cde5c53" 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-f7070a3a/7xmQD2Al7Z6_kVvl/images/customization/recorder/editor-timeline-onboarding-content.png?fit=max&auto=format&n=7xmQD2Al7Z6_kVvl&q=85&s=d42080337a0400734d4feb2bb7f1af07" 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-f7070a3a/7xmQD2Al7Z6_kVvl/images/customization/recorder/editor-timeline-onboarding-text.png?fit=max&auto=format&n=7xmQD2Al7Z6_kVvl&q=85&s=7c0cab1838ddd7ff5dcf5f0e50551a0d" 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-f7070a3a/7xmQD2Al7Z6_kVvl/images/customization/recorder/editor-timeline-onboarding-text-title.png?fit=max&auto=format&n=7xmQD2Al7Z6_kVvl&q=85&s=41e7a8d7fdfe6d1872acfd0d2933353e" 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-f7070a3a/7xmQD2Al7Z6_kVvl/images/customization/recorder/editor-timeline-onboarding-text-description.png?fit=max&auto=format&n=7xmQD2Al7Z6_kVvl&q=85&s=02feb0f897a3f6116358db57f851d376" 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-f7070a3a/7xmQD2Al7Z6_kVvl/images/customization/recorder/editor-timeline-onboarding-arrow.png?fit=max&auto=format&n=7xmQD2Al7Z6_kVvl&q=85&s=ad27085d3a517f9390d6df319e6fe197" 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-f7070a3a/7xmQD2Al7Z6_kVvl/images/customization/recorder/editor-timeline-container.png?fit=max&auto=format&n=7xmQD2Al7Z6_kVvl&q=85&s=c7e1a7bacc2a7ad833f777714b570a9d" 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-f7070a3a/7xmQD2Al7Z6_kVvl/images/customization/recorder/editor-timeline-container-playhead.png?fit=max&auto=format&n=7xmQD2Al7Z6_kVvl&q=85&s=c35b4e649fbfbe9d06aebbf652d201e3" 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-f7070a3a/7xmQD2Al7Z6_kVvl/images/customization/recorder/editor-timeline-container-playhead-line.png?fit=max&auto=format&n=7xmQD2Al7Z6_kVvl&q=85&s=fce59ba6fec7d96cd5aaa272b3c1895d" 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-f7070a3a/7xmQD2Al7Z6_kVvl/images/customization/recorder/editor-timeline-container-playhead-actions.png?fit=max&auto=format&n=7xmQD2Al7Z6_kVvl&q=85&s=d792704994bdf6461431217ed25c7c50" 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-f7070a3a/7xmQD2Al7Z6_kVvl/images/customization/recorder/editor-timeline-container-trim.png?fit=max&auto=format&n=7xmQD2Al7Z6_kVvl&q=85&s=65773f0255b5f5150342ac2e36370d6f" 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-f7070a3a/7xmQD2Al7Z6_kVvl/images/customization/recorder/editor-timeline-container-scale.png?fit=max&auto=format&n=7xmQD2Al7Z6_kVvl&q=85&s=d1bd7ccd4fd3b78e708846c2be40306c" 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-f7070a3a/7xmQD2Al7Z6_kVvl/images/customization/recorder/editor-timeline-container-scale-zoom.png?fit=max&auto=format&n=7xmQD2Al7Z6_kVvl&q=85&s=9b7423af3903f97b0b316a0371361d3f" 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-f7070a3a/7xmQD2Al7Z6_kVvl/images/customization/recorder/editor-timeline-container-scale-zoom-trigger.png?fit=max&auto=format&n=7xmQD2Al7Z6_kVvl&q=85&s=df43a1614268374f6bfb027b33a483ee" 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-f7070a3a/7xmQD2Al7Z6_kVvl/images/customization/recorder/editor-timeline-container-scale-zoom-options.png?fit=max&auto=format&n=7xmQD2Al7Z6_kVvl&q=85&s=7e6c5c1f06102dc3860426a51e00b296" 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-f7070a3a/7xmQD2Al7Z6_kVvl/images/customization/recorder/editor-timeline-container-scale-zoom-options-list.png?fit=max&auto=format&n=7xmQD2Al7Z6_kVvl&q=85&s=b0d4c48411610d74153e54f4132a55c2" 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-f7070a3a/7xmQD2Al7Z6_kVvl/images/customization/recorder/editor-timeline-container-scale-zoom-option-list-item.png?fit=max&auto=format&n=7xmQD2Al7Z6_kVvl&q=85&s=5e2ce6d2bf07190a0f4a5c5235df2c48" 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-f7070a3a/7xmQD2Al7Z6_kVvl/images/customization/recorder/editor-timeline-container-scale-zoom-options-1.png?fit=max&auto=format&n=7xmQD2Al7Z6_kVvl&q=85&s=6630e2b500812aeee8da3ad401f452af" 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-f7070a3a/7xmQD2Al7Z6_kVvl/images/customization/recorder/editor-timeline-container-marker.png?fit=max&auto=format&n=7xmQD2Al7Z6_kVvl&q=85&s=7f426858be604064e298a32d3e7ac280" 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>
