Vue Video Editor

A high-performance video editing suite for the web, powered by OpenVideo.

Built with Nuxt 4, Vue 3, WebCodecs, and PixiJS for professional-grade video rendering and processing directly in the browser.

Website · Discord · Documentation

Overview

Vue Video Editor is a specialized implementation of the OpenVideo engine, providing a rich, interactive UI for video composition, editing, and rendering. It leverages modern web technologies to deliver a desktop-class editing experience entirely within the browser.

Features

• 🚀 High-Performance Rendering: Powered by openvideo, utilizing WebCodecs and PixiJS for efficient hardware-accelerated processing.
• 🎞️ Multi-Track Timeline: Professional timeline interface for managing video, audio, image, and text layers.
• 🎙️ AI Voiceovers & Captions: Integrated with Deepgram and ElevenLabs for automated transcription and high-quality speech synthesis.
• ✨ Dynamic Effects & Transitions: GLSL-powered effects (Chromakey, etc.) and smooth transitions between clips.
• 💾 JSON Project State: Full serialization support for saving, sharing, and cloud-based rendering.
• 🎨 Customization: Extensible architecture built with Nuxt 4, Vue 3, and Tailwind CSS.

Tech Stack

• Framework: Nuxt 4 / Vue 3
• Engine: OpenVideo (WebCodecs + PixiJS)
• Styling: Tailwind CSS 4
• State Management: Pinia (via Nuxt)
• UI Components: Shadcn Vue / Lucide Vue
• Utilities: VueUse

Getting Started

Prerequisites

• Node.js (v18+)
• pnpm (v10+)

Installation

1. Clone the repository:

   git clone https://github.com/openvideodev/vue-video-editor.git

2. Install dependencies:

   pnpm install

3. Set up environment variables: Copy .env.sample to .env and fill in the required API keys (Colortv, Google Cloud, OpenAI, Deepgram, etc.).

Development

Start the development server:

pnpm dev

The editor will be available at http://localhost:3000.

Documentation

For detailed information on the underlying engine, visit the OpenVideo Documentation.

License

This project is licensed under the MIT License.