@ilovevideoeditor/react-video-editor — API reference

Drop-in multi-track editor React component.

Functions

useEditor

Subscribe to the entire editor state. Prefer the narrower hooks below.

useEditor(selector: (state: EditorState) => T): T

Parameters

• selector — (state: EditorState) => T

Returns T

useHistoryState

Undo / redo availability.

useHistoryState(): { canRedo: boolean; canUndo: boolean }

Returns { canRedo: boolean; canUndo: boolean }

usePlayhead

Current timeline frame and playing flag.

usePlayhead(): { frame: number; playing: boolean }

Returns { frame: number; playing: boolean }

useSelection

The selected layer ids and their resolved LayerJSON objects.

useSelection(): { ids: string[]; layers: LayerJSON[] }

Returns { ids: string[]; layers: LayerJSON[] }

useVideo

The currently-loaded VideoJSON.

useVideo(): VideoJSON

Returns VideoJSON

useViewport

Timeline viewport (zoom / scroll).

useViewport(): Viewport

Returns Viewport

VideoEditor

Public entry point for @ilovevideoeditor/react-video-editor.

The package ships:

• <VideoEditor> — the top-level React component.
• Default panel components for host apps that want to compose them directly (e.g. with a custom layout).
• useEditor / selectors for hooking into editor state.
• Command factories for scripted edits.
• RendererBridge for advanced cases that need raw access to the renderer's incremental update API.

The default stylesheet lives at @ilovevideoeditor/react-video-editor/style.css and must be imported by the host app (it contains only CSS variables and nested selectors on custom elements — no class names are introduced).

VideoEditor(__namedParameters: VideoEditorProps): Element

Parameters

• __namedParameters — VideoEditorProps

Returns Element

Type aliases

EditorState

OnUploadCallback

Signature for the user-supplied asset upload callback.

The editor calls this whenever a user drops a file into the preview or timeline (or picks one via the inspector). The default implementation just wraps the file in URL.createObjectURL so imports work locally out of the box; host apps that want persistent storage should override it.

OnUploadCallback: (file: File) => Promise<string>

Selection

Editor-side selection state. Layer ids only — resolve to LayerJSON objects via video.layers.find(...) at the call site.

VideoEditorProps

Viewport

Viewport state for the preview / timeline. Zoom and pan are editor-local (never persisted back into the VideoJSON).

Variables

useEditorStore

useEditorStore: UseBoundStore<StoreApi<EditorState>>