Skip to main content

@twick/video-editor - v0.15.0

Table of contents​

Interfaces​

Classes​

Functions​

Variables​

Functions​

getAnimationGif​

▸ getAnimationGif(name): string

Parameters​

NameType
namestring

Returns​

string

Defined in​

packages/video-editor/src/assets/index.ts:33

PlayerControls​

▸ PlayerControls(props): ReactNode | Promise<ReactNode>

Parameters​

NameType
propsPlayerControlsProps

Returns​

ReactNode | Promise<ReactNode>

Defined in​

packages/video-editor/src/components/controls/player-controls.tsx:95

TimelineManager​

▸ TimelineManager(«destructured»): Element

Parameters​

NameType
«destructured»Object
› trackZoomnumber
› timelineTickConfigs?TimelineTickConfig[]
› elementColors?ElementColors

Returns​

Element

Defined in​

packages/video-editor/src/components/timeline/timeline-manager.tsx:21

default​

▸ default(props): ReactNode | Promise<ReactNode>

VideoEditor is the main component for the Twick video editing interface. Provides a complete video editing environment with timeline management, player controls, and customizable panels for media, properties, and effects.

The editor consists of:

  • Left panel: Media library and assets
  • Center: Video player and preview
  • Right panel: Properties and settings
  • Bottom: Timeline and track management
  • Controls: Playback controls and timeline zoom

Parameters​

NameTypeDescription
propsVideoEditorPropsVideoEditor configuration and custom panels

Returns​

ReactNode | Promise<ReactNode>

Complete video editing interface

Example

import VideoEditor from '@twick/video-editor';

function MyVideoEditor() {
  return (
    <VideoEditor
      leftPanel={<MediaLibrary />}
      rightPanel={<PropertiesPanel />}
      bottomPanel={<EffectsPanel />}
      editorConfig={{
        videoProps: { width: 1920, height: 1080 },
        canvasMode: true
      }}
      defaultPlayControls={true}
    />
  );
}

Example

// Minimal configuration
<VideoEditor
  editorConfig={{
    videoProps: { width: 1280, height: 720 }
  }}
/>

Defined in​

packages/video-editor/src/components/video-editor.tsx:190

setElementColors​

▸ setElementColors(colors): void

Parameters​

NameType
colorsPartial<ElementColors>

Returns​

void

Defined in​

packages/video-editor/src/helpers/editor.utils.ts:6

debounce​

▸ debounce<T>(fn, delay): (...args: Parameters<T>) => void

Creates a debounced version of a function. The function will only be called after it has not been invoked for the specified delay.

Useful for expensive operations that should not run on every keystroke / mouse move (e.g. resize handlers, search, etc.).

Type parameters​

NameType
Textends (...args: any[]) => any

Parameters​

NameType
fnT
delaynumber

Returns​

fn

▸ (...args): void

Parameters​
NameType
...argsParameters<T>
Returns​

void

Defined in​

packages/video-editor/src/helpers/function.utils.ts:9

throttle​

▸ throttle<T>(fn, interval): (...args: Parameters<T>) => void

Creates a throttled version of a function. The function will be called at most once in every interval milliseconds, ignoring additional calls in between.

Useful for high–frequency events like scroll / mousemove where you still want regular updates but not on every event.

Type parameters​

NameType
Textends (...args: any[]) => any

Parameters​

NameType
fnT
intervalnumber

Returns​

fn

▸ (...args): void

Parameters​
NameType
...argsParameters<T>
Returns​

void

Defined in​

packages/video-editor/src/helpers/function.utils.ts:35

useEditorManager​

▸ useEditorManager(): Object

Custom hook for managing video editor operations. Provides functionality to add and update timeline elements with automatic collision detection and error handling. Integrates with live player context to position elements at the current playback time.

Returns​

Object

Object containing editor management functions

NameType
addElement(element: TrackElement) => Promise<void>
updateElement(element: TrackElement) => void

Example

const { addElement, updateElement } = useEditorManager();

// Add a new element at current playback time
await addElement(newElement);

// Update an existing element
updateElement(modifiedElement);

Defined in​

packages/video-editor/src/hooks/use-editor-manager.tsx:31

usePlayerControl​

▸ usePlayerControl(): Object

Custom hook to manage player control state and playback. Handles play/pause toggling and synchronization with timeline context for video editor playback control.

Returns​

Object

Object containing player control functions

NameType
togglePlayback() => void

Example

const { togglePlayback } = usePlayerControl();

// Toggle between play and pause states
togglePlayback();

Defined in​

packages/video-editor/src/hooks/use-player-control.tsx:23

useTimelineControl​

▸ useTimelineControl(): Object

Custom hook to manage timeline control operations. Provides functions for deleting items, splitting elements, and handling undo/redo operations in the video editor.

Returns​

Object

Object containing timeline control functions

NameType
splitElement(element: TrackElement, currentTime: number) => void
deleteItem(item?: Track | TrackElement) => void
handleUndo() => void
handleRedo() => void

Example

const { deleteItem, splitElement, handleUndo, handleRedo } = useTimelineControl();

// Delete a track or element
deleteItem(trackOrElement);

// Split an element at current time
splitElement(element, 5.5);

Defined in​

packages/video-editor/src/hooks/use-timeline-control.tsx:27

Variables​

animationGifs​

• Const animationGifs: Object

Type declaration​

NameType
fadestring
blurstring
breathe-instring
breathe-outstring
rise-downstring
rise-upstring
successionstring

Defined in​

packages/video-editor/src/assets/index.ts:11

ANIMATIONS​

• Const ANIMATIONS: Animation[]

Collection of available animations for video editor elements. Provides predefined animation configurations with sample previews that can be applied to timeline elements.

Example

import { ANIMATIONS } from '@twick/video-editor';

// Get all available animations
const allAnimations = ANIMATIONS;

// Find a specific animation
const fadeAnimation = ANIMATIONS.find(anim => anim.name === 'fade');

// Get animation sample
const sampleGif = fadeAnimation.getSample();

// Apply animation to element
element.setAnimation(fadeAnimation);

Example

// Use animation with custom settings
const riseAnimation = ANIMATIONS.find(anim => anim.name === 'rise');
const customRise = {
  ...riseAnimation,
  direction: 'down',
  interval: 2
};

element.setAnimation(customRise);

Defined in​

packages/video-editor/src/helpers/animation-manager.tsx:39

INITIAL_TIMELINE_DATA​

• Const INITIAL_TIMELINE_DATA: Object

Initial timeline data structure for new video editor projects. Provides a default timeline with a sample text element to get started.

Type declaration​

NameType
tracks{ type: string = "element"; id: string = "t-sample"; name: string = "sample"; elements: { id: string = "e-sample"; trackId: string = "t-sample"; name: string = "sample"; type: string = "text"; s: number = 0; e: number = 5; props: { text: string = "Twick Video Editor"; fill: string = "#FFFFFF" } }[] }[]
versionnumber

Defined in​

packages/video-editor/src/helpers/constants.ts:8

MIN_DURATION​

• Const MIN_DURATION: 0.1

Minimum duration for timeline elements in seconds. Used to prevent elements from having zero or negative duration.

Defined in​

packages/video-editor/src/helpers/constants.ts:37

TIMELINE_DROP_MEDIA_TYPE​

• Const TIMELINE_DROP_MEDIA_TYPE: "application/x-twick-media"

Defined in​

packages/video-editor/src/helpers/constants.ts:39

DRAG_TYPE​

• Const DRAG_TYPE: Object

Type declaration​

NameTypeDescription
START"start"Drag operation is starting
MOVE"move"Drag operation is in progress
END"end"Drag operation has ended

Defined in​

packages/video-editor/src/helpers/constants.ts:41

DEFAULT_TIMELINE_ZOOM​

• Const DEFAULT_TIMELINE_ZOOM: 1.5

Defined in​

packages/video-editor/src/helpers/constants.ts:50

DEFAULT_FPS​

• Const DEFAULT_FPS: 30

Default frames per second for timeline time display. Used for MM:SS.FF format (e.g. 00:15.12 = 15.4 seconds at 30fps).

Defined in​

packages/video-editor/src/helpers/constants.ts:60

SNAP_THRESHOLD_PX​

• Const SNAP_THRESHOLD_PX: 10

Snap threshold in pixels - used to convert to seconds based on zoom

Defined in​

packages/video-editor/src/helpers/constants.ts:63

DEFAULT_TIMELINE_ZOOM_CONFIG​

• Const DEFAULT_TIMELINE_ZOOM_CONFIG: Object

Type declaration​

NameTypeDescription
minnumberMinimum zoom level (10%)
maxnumberMaximum zoom level (300%)
stepnumberZoom step increment/decrement (10%)
defaultnumberDefault zoom level (150%)

Defined in​

packages/video-editor/src/helpers/constants.ts:65

DEFAULT_TIMELINE_TICK_CONFIGS​

• Const DEFAULT_TIMELINE_TICK_CONFIGS: TimelineTickConfig[]

Default timeline tick configurations for different duration ranges. Defines major tick intervals and number of minor ticks between majors to provide optimal timeline readability at various durations.

Each configuration applies when the duration is less than the specified threshold. Configurations are ordered by duration threshold ascending.

Defined in​

packages/video-editor/src/helpers/constants.ts:84

DEFAULT_ELEMENT_COLORS​

• Const DEFAULT_ELEMENT_COLORS: ElementColors

Default color scheme for different element types in the timeline. Provides consistent visual distinction between various timeline elements.

Defined in​

packages/video-editor/src/helpers/constants.ts:136

AVAILABLE_TEXT_FONTS​

• Const AVAILABLE_TEXT_FONTS: Object

Available text fonts for video editor text elements. Includes Google Fonts, display fonts, and custom CDN fonts.

Type declaration​

NameTypeDescription
RUBIK"Rubik"Modern sans-serif font
MULISH"Mulish"Clean and readable font
LUCKIEST_GUY"Luckiest Guy"Bold display font
PLAYFAIR_DISPLAY"Playfair Display"Elegant serif font
ROBOTO"Roboto"Classic sans-serif font
POPPINS"Poppins"Modern geometric font
BANGERS"Bangers"Comic-style display font
BIRTHSTONE"Birthstone"Handwritten-style font
CORINTHIA"Corinthia"Elegant script font
IMPERIAL_SCRIPT"Imperial Script"Formal script font
KUMAR_ONE_OUTLINE"Kumar One Outline"Bold outline font
LONDRI_OUTLINE"Londrina Outline"Light outline font
MARCK_SCRIPT"Marck Script"Casual script font
MONTSERRAT"Montserrat"Modern sans-serif font
PATTAYA"Pattaya"Stylish display font
PERALTA"Peralta"Unique display font
LUMANOSIMO"Lumanosimo"Handwritten-style font
KAPAKANA"Kapakana"Custom display font

Defined in​

packages/video-editor/src/helpers/constants.ts:174

TEXT_EFFECTS​

• Const TEXT_EFFECTS: TextEffect[]

Collection of available text effects for video editor text elements. Provides predefined text animation configurations that can be applied to text elements in the timeline.

Example

import { TEXT_EFFECTS } from '@twick/video-editor';

// Get all available text effects
const allTextEffects = TEXT_EFFECTS;

// Find a specific text effect
const typewriterEffect = TEXT_EFFECTS.find(effect => effect.name === 'typewriter');

// Apply text effect to element
textElement.setTextEffect(typewriterEffect);

Example

// Use text effect with custom settings
const elasticEffect = TEXT_EFFECTS.find(effect => effect.name === 'elastic');
const customElastic = {
  ...elasticEffect,
  delay: 0.5,
  bufferTime: 0.2
};

textElement.setTextEffect(customElastic);

Defined in​

packages/video-editor/src/helpers/text-effects-manager.tsx:35