DOCSEARCHbyAlgolia
Submit Docs

OpenVideo Editor Documentation

repository·main·Indexed 23 days ago

https://github.com/openvideodev/react-video-editor

A high-performance, client-side web video editor starter kit for video-editing SaaS applications. Built with React, it leverages WebCodecs and PixiJS v8 for hardware-accelerated rendering and zero-server-cost MP4 exporting. Features include a multi-track timeline, interactive canvas, asset management for Cloudflare R2/S3, and a comprehensive property system for managing clip attributes like transforms, animations, and audio.

Tokens
8.7K
Snippets
14
Records
49
Agent score
83%

What's inside OpenVideo Editor

  1. Overview of OpenVideo Editor features

    main

    OpenVideo Editor is a lightweight, high-performance, client-side web video editor designed as a starter kit for video-editing SaaS applications.

    Key Capabilities:

    • Client-Side Rendering: Uses WebCodecs and PixiJS v8 via @openvideo/engine-pixi for hardware-accelerated rendering and exporting.
    • Multi-Track Timeline: Supports layered editing (video, audio, images) with trimming, splitting, and snapping.
    • Interactive Canvas: Real-time viewport preview with drag, resize, and rotate capabilities.
    • Asset Management: Supports local and cloud storage (Cloudflare R2, AWS S3).
    • Effects & Transitions: Shader-based transitions between clips.
    • Local Exporting: Direct timeline rendering to MP4 files in the browser with zero server costs.

  5. Configure usePointerDrag options

    main

    The IPointerDragOptions<T> interface allows you to customize the behavior of the drag interaction.

    Event Callbacks

    • onBeforeStart(state: IPointerDragData<T>): void: Called immediately on pointerDown.
    • onStart(state: IPointerDragData<T>): void: Called when dragging begins (either via startDragging or when the dragPredicate is met).
    • onMove(state: IPointerDragData<T>): void: Called during active dragging.
    • onEnd(state: IPointerDragData<T>): void: Called when the pointer is released after a drag.
    • onClick(state: IPointerDragData<T>): void: Called if a pointerdown and pointerup occur without a drag being triggered.

    Behavior Control

    • dragPredicate?(state: IPointerDragData<T>): boolean: A function that returns true to trigger the transition from a simple click/down to an active drag.
    • stopPropagation?: boolean: If true, calls e.stopPropagation() on move/up events (Default: true).
    • preventDefault?: boolean: If true, calls e.preventDefault() on move/up events (Default: true).
    • pointerDownStopPropagation?: boolean: Controls stopPropagation specifically for the pointerdown event (Default: false).
    • pointerDownPreventDefault?: boolean: Controls preventDefault specifically for the pointerdown event (Default: false).

  6. Reference: Environment variables

    main

    The following environment variables are used by the OpenVideo Editor:

    VariableDescription
    R2_*Cloudflare R2 / S3 credentials and public CDN domain for asset uploads.
    DEEPGRAM_API_KEYAPI key for audio and video transcription.
    PEXELS_API_KEYAPI key for the stock media library.

  7. Check property support with supportsProperty()

    main

    Use the supportsProperty function to determine if a specific PropertyKey is valid for a given clip type. This is useful for conditional rendering or validation logic.

    Signature: supportsProperty(clipType: string, property: PropertyKey): boolean

    export function supportsProperty(clipType: string, property: PropertyKey): boolean {
  return PROPERTY_REGISTRY[clipType]?.includes(property) ?? false;
}

  9. Invoke an action with `invokeAction`

    main

    Use invokeAction to trigger an action. This will execute all handlers currently bound to that action.

    Some actions require arguments (defined in ActionArgsMap), while others do not. You can optionally provide an InvocationTriggers value ("keypress" | "mouseclick") to indicate how the action was triggered.

  10. Get a presigned R2 upload configuration with getPresignedConfig

    main

    Use getPresignedConfig to request a presigned URL from the backend for a specific file name. This is necessary when you need to obtain the upload credentials (like the presignedUrl and url) before performing the actual upload, for example, if you need to register the asset in your database first.

    It makes a POST request to /api/uploads/presign with a JSON body containing fileNames.

  11. Get all properties for a clip type with getPropertiesForType()

    main

    Use the getPropertiesForType function to retrieve an array of all PropertyKeys associated with a specific clip type. This is the primary way to fetch the list of available configuration options for a selected clip.

    Signature: getPropertiesForType(clipType: string): PropertyKey[]

    export function getPropertiesForType(clipType: string): PropertyKey[] {
  return PROPERTY_REGISTRY[clipType] ?? [];
}