openvideodev/react-video-editor
openvideodev/react-video-editor has 1,829 GitHub stars and 418 forks. GitHot measured -1 stars in 24 hours. Last checked 2026-11-08 01:12 UTC. Last push 2026-06-30.
Online react video editor using remotion. Capcut and canva clone.
What you can do
- Client-Side Rendering: Hardware-accelerated rendering and exporting using WebCodecs and PixiJS v8 via @openvideo/engine-pixi.
- Multi-Track Timeline: Layered editing for video, audio, and images with drag-and-drop, splitting, trimming, and snapping.
- Interactive Canvas: Real-time viewport preview supporting drag, resize, rotate, and layer re-ordering.
- Asset Management: Local and cloud storage (e.g., Cloudflare R2, AWS S3) for media uploads.
Measured star growth
- in 24h
- -1
- in 7 days
- Collecting history
- in 15 days
- Collecting history
- in 1 month
- Collecting history
Net star changes over overlapping periods, not daily totals. Missing measurements are left blank. Stars measure attention, not software quality.
README.md
OriginalOpenVideo Editor
A lightweight, high-performance, client-side web video editor. It serves as a showcase for the OpenVideo engine and a starter kit for building video-editing SaaS applications.
Key Features
- Client-Side Rendering: Hardware-accelerated rendering and exporting using WebCodecs and PixiJS v8 via
@openvideo/engine-pixi. - Multi-Track Timeline: Layered editing for video, audio, and images with drag-and-drop, splitting, trimming, and snapping.
- Interactive Canvas: Real-time viewport preview supporting drag, resize, rotate, and layer re-ordering.
- Asset Management: Local and cloud storage (e.g., Cloudflare R2, AWS S3) for media uploads.
- Effects & Transitions: Custom shader-based transitions and effects applied between clips.
- Local Exporting: Direct timeline rendering into MP4 files using browser APIs with zero server rendering costs.
- Modern UI/UX: Dark-mode interface built with Tailwind CSS v4, Radix UI, and Framer Motion.
Tech Stack
| Component | Technology |
|---|---|
| Framework | Next.js 15 (App Router) |
| Rendering | PixiJS v8 via @openvideo/engine-pixi |
| Timeline & Core | @openvideo/core, @openvideo/timeline |
| State | Zustand |
| Styling | Tailwind CSS v4 |
| UI & Animation | Radix UI, shadcn/ui, Framer Motion |
Getting Started
1. Installation
Install dependencies from the monorepo root or directly in this directory:
# From the monorepo root
pnpm install
# Or within this directory (standalone)
npm install
2. Environment Setup
Copy .env.sample to .env and configure the required keys:
cp .env.sample .env
| Variable | Description |
|---|---|
R2_* |
Cloudflare R2 / S3 credentials and public CDN domain for asset uploads. |
DEEPGRAM_API_KEY |
API key for audio and video transcription. |
PEXELS_API_KEY |
API key for the stock media library. |
3. Run the Development Server
pnpm dev
# or
npm run dev
Open http://localhost:3000 in your browser.
License & Commercial Usage
OpenVideo is available under a dual-license model:
- Free License: Free for individuals, non-profits, and organizations with up to 3 employees.
- Company License: Required for organizations with more than 3 employees.
For commercial licensing, custom integrations, or enterprise support, contact us at [email protected].
Explore related projects
freeCodeCamp/freeCodeCamp
freeCodeCamp.org's open-source codebase and curriculum. Learn math, programming, and computer science for free.
458,732 starsdonnemartin/system-design-primer
Learn how to design large-scale systems. Prep for the system design interview. Includes Anki flashcards.
377,290 starsreact/react
The library for web and native user interfaces.
252,394 starsvuejs/vue
This is the repo for Vue 2. For Vue 3, go to https://github.com/vuejs/core
212,630 stars