OpenCut 爆了：我拆了一下这个开源 CapCut 替代品的前端架构，前端工程师该学什么

OpenCut 爆了：我拆了一下这个开源 CapCut 替代品的前端架构，前端工程师该学什么

导语

你有没有觉得现在做短视频已经离不开 CapCut 了？剪映国际版确实好用，但如果你做过 ToB 工具、私有化部署，或者只是单纯不想把素材上传到第三方，就会发现可选项特别少。最近 GitHub 上火起来的 OpenCut 正好踩在这个缺口上：开源、本地优先、支持 Web/桌面/移动端，而且整套前端栈特别值得前端工程师拆开看看。

问题：视频编辑器为什么以前很少做 Web 版？

传统非线性视频编辑软件大多是桌面原生应用，原因是早期浏览器里没有稳定的帧精确时间轴、没有高性能 Canvas 合成、更没有硬件加速编解码。前端想做一个能用的剪辑器，至少得同时解决三件事：时间轴交互、多轨道预览、媒体资产管理。CapCut 之所以能跨端，是因为字节有完整的多端基础设施；但对独立开发者和小团队来说，这套东西太重了。

OpenCut 的 README 直接点明了目标：不是做一个“网页版剪映”，而是做一个能在任何平台上跑、视频留在本地的编辑器。这个定位很关键，因为它决定了架构取舍。

方案：从 README 看 OpenCut 的前端架构

OpenCut 的主仓库分两层。OpenCut-app/OpenCut 是目前正在重写的版本，计划把核心能力下沉到 Rust，上层用一套代码同时覆盖 Web、桌面和移动端；而当前能直接跑的是 opencut-classic，官网 opencut.app 上跑的就是 classic 版。

对前端工程师来说，真正有价值的是这个：一个开源视频编辑器在 2026 年是怎么组织前端代码的。以 classic 版和 web 应用为例，至少能看到四个层次。

第一层是项目组织。它用 Next.js 做 Web 主应用，说明团队把官网/编辑器入口都放在了一个 React 框架里。目录结构里单独分出了 components、hooks、lib、stores、types，是典型的“产品级”前端结构，不是 demo 项目那种把所有逻辑塞进一个文件的做法。

第二层是状态管理。README 明确写了用 Zustand，这个选择很聪明。视频编辑器需要大量全局状态：当前播放时间、选中片段、轨道列表、撤销重做栈。Redux 能做，但模板代码太多；Zustand 在这种场景里足够轻，又不失可维护性。

第三层是工程化工具链。经典版用 Bun 做包管理，用 Docker Compose 跑 PostgreSQL 和 Redis，说明它从一开始就不是纯前端玩具，而是带服务端的完整产品。重写版更进一步，用 moonrepo 管理 monorepo，把 proto、web、api、desktop 拆成独立任务，这是面向多人协作和长期演进的工程化设计。

第四层是跨端策略。重写版明确说要用 Rust core + 一套代码跑多端。对前端工程师来说，这提示了一个趋势：复杂交互和计算密集型模块逐渐从 JS 层下沉到 Rust/WASM，而 React 层继续负责 UI 和交互编排。OpenCut 的 MCP server 和 headless mode 说明它还想做 AI 自动化和批量渲染，这已经不是一个简单的播放器了。

代码与工程化启示

如果你在做的是媒体类 Web 应用，OpenCut 至少给了三个可落地的参考。

第一，Zustand 足够应对复杂编辑器状态。不要一上来就上 Redux Toolkit，先把全局状态拆成 domain store：播放器一个 store、时间轴一个 store、素材库一个 store，模块边界会清晰很多。

第二，Next.js 可以做编辑器入口，但不要把编辑逻辑全塞进 React 组件。OpenCut 的 web app 只承担 UI 层，真正的媒体处理靠后端和未来下沉到 Rust 的核心。前端组件只做状态渲染和交互事件转发，不要把帧合成、编码这种 CPU 密集型任务留在主线程。

第三，从第一天就把后端和前端分开。OpenCut 用 Docker 跑数据库和缓存，前端只调用 API。这样做的好处是后面做桌面端和移动端时，不用重构数据层；headless mode 和自动化批量渲染也能复用同一套后端。

结论：前端工程师能从这里学到什么

OpenCut 不是一个已经完成的产品，README 自己也说正在重写、breaking changes 很多。但它的架构思路很清晰：前端负责 UI 和交互，核心能力下沉到 Rust/WASM，服务端负责存储和媒体处理。这种分层在 2026 年会越来越常见，尤其是对音视频、3D、设计工具这类重计算场景。

如果你正想做一个复杂的 Web 交互工具，OpenCut 的工程化结构比它的功能更值得参考。

收尾

如果你对开源编辑器架构感兴趣，建议直接去看 OpenCut-app/OpenCut 和 classic 两个仓库的目录结构，比看文章更有用。下一个值得拆解的，可以看看 opencut 的 Rust 核心层什么时候开源，那会是前端工程师理解多媒体原生性能的一次好机会。