openvideodev/react-video-editor：Online react video editor usin

openvideodev

1.8k

413 21

Other

项目介绍

openvideodev/react-video-editor 是一个托管在 GitHub 上的开源项目，主要使用 TypeScript 编写，采用 Other 许可证，目前获得 1.8k 个 Star、413 次 Fork。

仓库全名: openvideodev/react-video-editor
开源许可证: Other
Star 数: 1.8k
Fork 数: 413
未关闭 Issue: 21

README 摘要

OpenVideo 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. Website · Discord · Docs 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…

完整内容见 GitHub 原始 README 或本页。

常见问题

react-video-editor 用什么语言开发？

主要使用 TypeScript 编写，采用 Other 许可证，目前有 1.8k 个 Star。

react-video-editor 可以免费商用吗？

仓库标注的许可证为 Other，商用前请先阅读仓库 LICENSE 文件确认授权范围。

如何获取 react-video-editor 的源码？

可以直接克隆仓库：git clone https://github.com/openvideodev/react-video-editor.git，默认分支为 main；安装与运行步骤见仓库 README。

react-video-editor 最近还在维护吗？

仓库最近一次更新为 6月30日，当前有 21 个未关闭 Issue；Star 数为 1.8k，可作为社区活跃度的参考。

简要分析

热度分

2681

价值分

1223

活跃状态

活跃

canva capcut react remotion video-editor

GitHub

语言占比

CSS

JavaScript

TypeScript

贡献者

README

OpenVideo 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.

Website · Discord · Docs

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].

react-video-editor