Skip to main content
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>

​
Title

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltVideoEditorPlayerWireframe.Title />
</VeltWireframe>

​
ApplyButton

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltVideoEditorPlayerWireframe.ApplyButton>
        <VeltVideoEditorPlayerWireframe.ApplyButton.Loading />
    </VeltVideoEditorPlayerWireframe.ApplyButton>
</VeltWireframe>

​
Loading

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltVideoEditorPlayerWireframe.ApplyButton.Loading />
</VeltWireframe>

​
RetakeButton

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltVideoEditorPlayerWireframe.RetakeButton />
</VeltWireframe>

​
DownloadButton

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltVideoEditorPlayerWireframe.DownloadButton />
</VeltWireframe>

​
CloseButton

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltVideoEditorPlayerWireframe.CloseButton />
</VeltWireframe>

​
Preview

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltVideoEditorPlayerWireframe.Preview>
        <VeltVideoEditorPlayerWireframe.Preview.Loading />
        <VeltVideoEditorPlayerWireframe.Preview.Video />
    </VeltVideoEditorPlayerWireframe.Preview>
</VeltWireframe>

​
Loading

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltVideoEditorPlayerWireframe.Preview.Loading />
</VeltWireframe>

​
Video

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltVideoEditorPlayerWireframe.Preview.Video />
</VeltWireframe>

​
ToggleButton

Template Variables:
VariableDescription
isPlayingTrimPreviewThis is true when the video is playing in the preview else it is false
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltVideoEditorPlayerWireframe.ToggleButton />
</VeltWireframe>

​
Time

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltVideoEditorPlayerWireframe.Time>
        <VeltVideoEditorPlayerWireframe.CurrentTime />
        <VeltVideoEditorPlayerWireframe.TotalTime />
    </VeltVideoEditorPlayerWireframe.Time>
</VeltWireframe>

​
CurrentTime

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltVideoEditorPlayerWireframe.CurrentTime />
</VeltWireframe>

​
TotalTime

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltVideoEditorPlayerWireframe.TotalTime />
</VeltWireframe>

​
SplitButton

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltVideoEditorPlayerWireframe.SplitButton>
        <VeltVideoEditorPlayerWireframe.CurrentTime />
    </VeltVideoEditorPlayerWireframe.SplitButton>
</VeltWireframe>

​
CurrentTime

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltVideoEditorPlayerWireframe.CurrentTime />
</VeltWireframe>

​
DeleteButton

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltVideoEditorPlayerWireframe.DeleteButton />
</VeltWireframe>

​
AddZoomButton

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltVideoEditorPlayerWireframe.AddZoomButton />
</VeltWireframe>

​
Timeline

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltVideoEditorPlayerWireframe.Timeline>
        <VeltVideoEditorPlayerWireframe.Timeline.BackspaceHint />
        <VeltVideoEditorPlayerWireframe.Timeline.Onboarding />
        <VeltVideoEditorPlayerWireframe.Timeline.Container />
        <VeltVideoEditorPlayerWireframe.Timeline.Marker />
    </VeltVideoEditorPlayerWireframe.Timeline>
</VeltWireframe>

​
BackspaceHint

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltVideoEditorPlayerWireframe.Timeline.BackspaceHint />
</VeltWireframe>

​
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>
Content
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltVideoEditorPlayerWireframe.Timeline.Onboarding.Content />
</VeltWireframe>
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>
Title
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltVideoEditorPlayerWireframe.Timeline.Onboarding.Text.Title />
</VeltWireframe>
Description
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltVideoEditorPlayerWireframe.Timeline.Onboarding.Text.Description />
</VeltWireframe>
Arrow
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltVideoEditorPlayerWireframe.Timeline.Onboarding.Arrow />
</VeltWireframe>

​
Container

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltVideoEditorPlayerWireframe.Timeline.Container>
        <VeltVideoEditorPlayerWireframe.Timeline.Playhead />
        <VeltVideoEditorPlayerWireframe.Timeline.Trim />
        <VeltVideoEditorPlayerWireframe.Timeline.Scale />
    </VeltVideoEditorPlayerWireframe.Timeline.Container>
</VeltWireframe>
Playhead
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltVideoEditorPlayerWireframe.Timeline.Playhead>
        <VeltVideoEditorPlayerWireframe.Timeline.Playhead.Line />
        <VeltVideoEditorPlayerWireframe.Timeline.Playhead.Actions />
    </VeltVideoEditorPlayerWireframe.Timeline.Playhead>
</VeltWireframe>
Line
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltVideoEditorPlayerWireframe.Timeline.Playhead.Line />
</VeltWireframe>
Actions
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltVideoEditorPlayerWireframe.Timeline.Playhead.Actions />
</VeltWireframe>
Trim
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltVideoEditorPlayerWireframe.Timeline.Trim />
</VeltWireframe>
Scale
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltVideoEditorPlayerWireframe.Timeline.Scale>
        <VeltVideoEditorPlayerWireframe.Timeline.Scale.ZoomButton />
    </VeltVideoEditorPlayerWireframe.Timeline.Scale>
</VeltWireframe>
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>
Trigger
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltVideoEditorPlayerWireframe.Timeline.Scale.ZoomButton.Trigger />
</VeltWireframe>
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>
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>
Item
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltVideoEditorPlayerWireframe.Timeline.Scale.ZoomButton.Options.List.Item />
</VeltWireframe>
Input
  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltVideoEditorPlayerWireframe.Timeline.Scale.ZoomButton.Options.Input />
</VeltWireframe>

​
Marker

  • React / Next.js
  • Other Frameworks
<VeltWireframe>
    <VeltVideoEditorPlayerWireframe.Timeline.Marker />
</VeltWireframe>
⌘I