The editor has been removed from this core repository and moved to dedicated repositories. We now offer two official, open-source video editors built on top of OpenVideo:

• React Video Editor: GitHub Repository | Live Demo
• Vue Video Editor: GitHub Repository | Live Demo

• Browser-Based Rendering: Leverages modern WebCodecs for efficient video encoding and decoding directly in the browser.
• Advanced Composition: Powered by PixiJS for complex multi-track layering, transforms, and real-time previews.
• Universal Clip Support: Built-in support for Video, Audio, Image, Text, and Captions.
• Dynamic Effects & Transitions: Extensible GLSL-based effects (Chromakey, etc.) and transitions.
• JSON Serialization: Full project state can be serialized to and from JSON for easy persistence and cloud rendering.
• Low Latency: Optimized for interactive video editing experiences.

Comprehensive documentation is available at docs.openvideo.dev.

npm install openvideo

import { Studio, Video } from 'openvideo';

// 1. Initialize the Studio (Project State & Preview)
const studio = new Studio({
  width: 1920,
  height: 1080,
  fps: 30,
  canvas: document.getElementById('preview-canvas') as HTMLCanvasElement,
  spacing: 20
});

// 2. Load and add a Video Clip
const video = await Video.fromUrl('https://example.com/video.mp4');
await studio.addClip(video);

// 3. Start Preview
studio.play();

• Studio: Manages the project state, including tracks, clips, and timeline configuration.
• Compositor: The rendering engine that handles playback, seeking, and final export using WebCodecs.
• Clips: Specialized objects for different media types (Video, Audio, Text, Image, Caption, etc.).
• JsonSerialization: Utilities to convert your entire project into a portable JSON format.

• WebCodecs: For ultra-fast, hardware-accelerated video processing.
• PixiJS: For a robust and performant 2D/3D rendering engine.
• wrapbox: Internal utility for low-level MP4 box manipulation and muxing.

For inquiries, support, or custom solutions, reach out to us at [email protected].

See LICENSE.