Video Editor

We recommend that you familiarize yourselves with UI Customization Concepts before attempting to modify any components.

Overview

React / Next.js
Other Frameworks

<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>

<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>

Title

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltVideoEditorPlayerWireframe.Title />
</VeltWireframe>

<velt-wireframe style="display:none;">
    <velt-video-editor-player-title-wireframe></velt-video-editor-player-title-wireframe>
</velt-wireframe>

ApplyButton

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltVideoEditorPlayerWireframe.ApplyButton>
        <VeltVideoEditorPlayerWireframe.ApplyButton.Loading />
    </VeltVideoEditorPlayerWireframe.ApplyButton>
</VeltWireframe>

<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>

Loading

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltVideoEditorPlayerWireframe.ApplyButton.Loading />
</VeltWireframe>

<velt-wireframe style="display:none;">
    <velt-video-editor-player-apply-button-loading-wireframe></velt-video-editor-player-apply-button-loading-wireframe>
</velt-wireframe>

RetakeButton

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltVideoEditorPlayerWireframe.RetakeButton />
</VeltWireframe>

<velt-wireframe style="display:none;">
    <velt-video-editor-player-retake-button-wireframe></velt-video-editor-player-retake-button-wireframe>
</velt-wireframe>

DownloadButton

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltVideoEditorPlayerWireframe.DownloadButton />
</VeltWireframe>

<velt-wireframe style="display:none;">
    <velt-video-editor-player-download-button-wireframe></velt-video-editor-player-download-button-wireframe>
</velt-wireframe>

CloseButton

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltVideoEditorPlayerWireframe.CloseButton />
</VeltWireframe>

<velt-wireframe style="display:none;">
    <velt-video-editor-player-close-button-wireframe></velt-video-editor-player-close-button-wireframe>
</velt-wireframe>

Preview

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltVideoEditorPlayerWireframe.Preview>
        <VeltVideoEditorPlayerWireframe.Preview.Loading />
        <VeltVideoEditorPlayerWireframe.Preview.Video />
    </VeltVideoEditorPlayerWireframe.Preview>
</VeltWireframe>

<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>

Loading

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltVideoEditorPlayerWireframe.Preview.Loading />
</VeltWireframe>

<velt-wireframe style="display:none;">
    <velt-video-editor-player-preview-loading-wireframe></velt-video-editor-player-preview-loading-wireframe>
</velt-wireframe>

Video

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltVideoEditorPlayerWireframe.Preview.Video />
</VeltWireframe>

<velt-wireframe style="display:none;">
    <velt-video-editor-player-preview-video-wireframe></velt-video-editor-player-preview-video-wireframe>
</velt-wireframe>

ToggleButton

Template Variables:

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

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltVideoEditorPlayerWireframe.ToggleButton />
</VeltWireframe>

<velt-wireframe style="display:none;">
    <velt-video-editor-player-toggle-button-wireframe></velt-video-editor-player-toggle-button-wireframe>
</velt-wireframe>

Time

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltVideoEditorPlayerWireframe.Time>
        <VeltVideoEditorPlayerWireframe.CurrentTime />
        <VeltVideoEditorPlayerWireframe.TotalTime />
    </VeltVideoEditorPlayerWireframe.Time>
</VeltWireframe>

<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>

CurrentTime

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltVideoEditorPlayerWireframe.CurrentTime />
</VeltWireframe>

<velt-wireframe style="display:none;">
    <velt-video-editor-player-current-time-wireframe></velt-video-editor-player-current-time-wireframe>
</velt-wireframe>

TotalTime

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltVideoEditorPlayerWireframe.TotalTime />
</VeltWireframe>

<velt-wireframe style="display:none;">
    <velt-video-editor-player-total-time-wireframe></velt-video-editor-player-total-time-wireframe>
</velt-wireframe>

SplitButton

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltVideoEditorPlayerWireframe.SplitButton>
        <VeltVideoEditorPlayerWireframe.CurrentTime />
    </VeltVideoEditorPlayerWireframe.SplitButton>
</VeltWireframe>

<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>

CurrentTime

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltVideoEditorPlayerWireframe.CurrentTime />
</VeltWireframe>

<velt-wireframe style="display:none;">
    <velt-video-editor-player-current-time-wireframe></velt-video-editor-player-current-time-wireframe>
</velt-wireframe>

DeleteButton

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltVideoEditorPlayerWireframe.DeleteButton />
</VeltWireframe>

<velt-wireframe style="display:none;">
    <velt-video-editor-player-delete-button-wireframe></velt-video-editor-player-delete-button-wireframe>
</velt-wireframe>

AddZoomButton

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltVideoEditorPlayerWireframe.AddZoomButton />
</VeltWireframe>

<velt-wireframe style="display:none;">
    <velt-video-editor-player-add-zoom-button-wireframe></velt-video-editor-player-add-zoom-button-wireframe>
</velt-wireframe>

Timeline

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltVideoEditorPlayerWireframe.Timeline>
        <VeltVideoEditorPlayerWireframe.Timeline.BackspaceHint />
        <VeltVideoEditorPlayerWireframe.Timeline.Onboarding />
        <VeltVideoEditorPlayerWireframe.Timeline.Container />
        <VeltVideoEditorPlayerWireframe.Timeline.Marker />
    </VeltVideoEditorPlayerWireframe.Timeline>
</VeltWireframe>

<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>

BackspaceHint

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltVideoEditorPlayerWireframe.Timeline.BackspaceHint />
</VeltWireframe>

<velt-wireframe style="display:none;">
    <velt-video-editor-player-timeline-backspace-hint-wireframe></velt-video-editor-player-timeline-backspace-hint-wireframe>
</velt-wireframe>

Onboarding

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltVideoEditorPlayerWireframe.Timeline.Onboarding>
        <VeltVideoEditorPlayerWireframe.Timeline.Onboarding.Content />
        <VeltVideoEditorPlayerWireframe.Timeline.Onboarding.Text />
        <VeltVideoEditorPlayerWireframe.Timeline.Onboarding.Arrow />
    </VeltVideoEditorPlayerWireframe.Timeline.Onboarding>
</VeltWireframe>

<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>

Content

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltVideoEditorPlayerWireframe.Timeline.Onboarding.Content />
</VeltWireframe>

<velt-wireframe style="display:none;">
    <velt-video-editor-player-timeline-onboarding-content-wireframe></velt-video-editor-player-timeline-onboarding-content-wireframe>
</velt-wireframe>

Text

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltVideoEditorPlayerWireframe.Timeline.Onboarding.Text>
        <VeltVideoEditorPlayerWireframe.Timeline.Onboarding.Text.Title />
        <VeltVideoEditorPlayerWireframe.Timeline.Onboarding.Text.Description />
    </VeltVideoEditorPlayerWireframe.Timeline.Onboarding.Text>
</VeltWireframe>

<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>

Title

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltVideoEditorPlayerWireframe.Timeline.Onboarding.Text.Title />
</VeltWireframe>

<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>

Description

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltVideoEditorPlayerWireframe.Timeline.Onboarding.Text.Description />
</VeltWireframe>

<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>

Arrow

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltVideoEditorPlayerWireframe.Timeline.Onboarding.Arrow />
</VeltWireframe>

<velt-wireframe style="display:none;">
    <velt-video-editor-player-timeline-onboarding-arrow-wireframe></velt-video-editor-player-timeline-onboarding-arrow-wireframe>
</velt-wireframe>

Container

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltVideoEditorPlayerWireframe.Timeline.Container>
        <VeltVideoEditorPlayerWireframe.Timeline.Playhead />
        <VeltVideoEditorPlayerWireframe.Timeline.Trim />
        <VeltVideoEditorPlayerWireframe.Timeline.Scale />
    </VeltVideoEditorPlayerWireframe.Timeline.Container>
</VeltWireframe>

<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>

Playhead

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltVideoEditorPlayerWireframe.Timeline.Playhead>
        <VeltVideoEditorPlayerWireframe.Timeline.Playhead.Line />
        <VeltVideoEditorPlayerWireframe.Timeline.Playhead.Actions />
    </VeltVideoEditorPlayerWireframe.Timeline.Playhead>
</VeltWireframe>

<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>

Line

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltVideoEditorPlayerWireframe.Timeline.Playhead.Line />
</VeltWireframe>

<velt-wireframe style="display:none;">
    <velt-video-editor-player-timeline-playhead-line-wireframe></velt-video-editor-player-timeline-playhead-line-wireframe>
</velt-wireframe>

Actions

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltVideoEditorPlayerWireframe.Timeline.Playhead.Actions />
</VeltWireframe>

<velt-wireframe style="display:none;">
    <velt-video-editor-player-timeline-playhead-actions-wireframe></velt-video-editor-player-timeline-playhead-actions-wireframe>
</velt-wireframe>

Trim

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltVideoEditorPlayerWireframe.Timeline.Trim />
</VeltWireframe>

<velt-wireframe style="display:none;">
    <velt-video-editor-player-timeline-trim-wireframe></velt-video-editor-player-timeline-trim-wireframe>
</velt-wireframe>

Scale

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltVideoEditorPlayerWireframe.Timeline.Scale>
        <VeltVideoEditorPlayerWireframe.Timeline.Scale.ZoomButton />
    </VeltVideoEditorPlayerWireframe.Timeline.Scale>
</VeltWireframe>

<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>

ZoomButton

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltVideoEditorPlayerWireframe.Timeline.Scale.ZoomButton>
        <VeltVideoEditorPlayerWireframe.Timeline.Scale.ZoomButton.Trigger />
        <VeltVideoEditorPlayerWireframe.Timeline.Scale.ZoomButton.Options />
    </VeltVideoEditorPlayerWireframe.Timeline.Scale.ZoomButton>
</VeltWireframe>

<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>

Trigger

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltVideoEditorPlayerWireframe.Timeline.Scale.ZoomButton.Trigger />
</VeltWireframe>

<velt-wireframe style="display:none;">
    <velt-video-editor-player-zoom-button-trigger-wireframe></velt-video-editor-player-zoom-button-trigger-wireframe>
</velt-wireframe>

Options

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltVideoEditorPlayerWireframe.Timeline.Scale.ZoomButton.Options>
        <VeltVideoEditorPlayerWireframe.Timeline.Scale.ZoomButton.Options.List />
        <VeltVideoEditorPlayerWireframe.Timeline.Scale.ZoomButton.Options.Input />
    </VeltVideoEditorPlayerWireframe.Timeline.Scale.ZoomButton.Options>
</VeltWireframe>

<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>

List

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltVideoEditorPlayerWireframe.Timeline.Scale.ZoomButton.Options.List>
        <VeltVideoEditorPlayerWireframe.Timeline.Scale.ZoomButton.Options.List.Item />
    </VeltVideoEditorPlayerWireframe.Timeline.Scale.ZoomButton.Options.List>
</VeltWireframe>

<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>

Item

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltVideoEditorPlayerWireframe.Timeline.Scale.ZoomButton.Options.List.Item />
</VeltWireframe>

<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>

Input

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltVideoEditorPlayerWireframe.Timeline.Scale.ZoomButton.Options.Input />
</VeltWireframe>

<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>

Marker

React / Next.js
Other Frameworks

<VeltWireframe>
    <VeltVideoEditorPlayerWireframe.Timeline.Marker />
</VeltWireframe>

<velt-wireframe style="display:none;">
    <velt-video-editor-player-timeline-marker-wireframe></velt-video-editor-player-timeline-marker-wireframe>
</velt-wireframe>

​Overview

​Title

​ApplyButton

​Loading

​RetakeButton

​DownloadButton

​CloseButton

​Preview

​Loading

​Video

​ToggleButton

​Time

​CurrentTime

​TotalTime

​SplitButton

​CurrentTime

​DeleteButton

​AddZoomButton

​Timeline

​BackspaceHint

​Onboarding

Content

Text

Title

Description

Arrow

​Container

Playhead

Line

Actions

Trim

Scale

ZoomButton

Trigger

Options

List

Item

Input

​Marker

Overview

Title

ApplyButton

Loading

RetakeButton

DownloadButton

CloseButton

Preview

Loading

Video

ToggleButton

Time

CurrentTime

TotalTime

SplitButton

CurrentTime

DeleteButton

AddZoomButton

Timeline

BackspaceHint

Onboarding

Container

Marker