OpenCut

フリー & オープンソースのウェブ動画エディタ — CapCut の完全代替

1 — 概要
What is OpenCut

OpenCut は、ブラウザ上で動作するタイムラインベースの動画編集ツール。動画はデバイスに留まり（プライバシー重視）、ウォーターマーク・課金なし。CapCut が基本機能を有料化したことへの対抗として生まれた OSS プロジェクト。

Webプラットフォーム
Next.jsフレームワーク
Zustand状態管理
Bunランタイム

主な機能：マルチトラック対応のタイムライン、リアルタイムプレビュー、スナッピング、リップル編集、エフェクト・フィルター・キャプション・スタンプ、エクスポート、TikTok などプラットフォーム向けレイアウトガイド。

2 — アーキテクチャ
モノレポ構成
パス役割
apps/web/メインの Next.js アプリ（UI・エディタ・API 連携）
apps/web/src/core/EditorCore シングルトン。全マネージャの起点
apps/web/src/stores/Zustand ストア（UI 状態）
apps/web/src/components/editor/エディタ UI パネル群（assets / preview / properties / timeline）
apps/web/src/hooks/カスタム React フック（drag・transform・keybindings 等）
apps/web/src/types/TypeScript 型定義（timeline / effects / rendering / export 等）
packages/共有パッケージ（Turbo モノレポ）
EditorCore — マネージャ一覧

EditorCore はシングルトン。useEditor() フックで取得し、各マネージャを useSyncExternalStore で購読して React と橋渡しする。

playback再生・停止・シーク・フレームループ
timelineトラック・要素の CRUD・並び替え
scenesシーン（シーケンス）管理
projectプロジェクト設定・メタデータ
media動画・画像・音声のアップロード管理
rendererCanvas レンダリング・フレーム合成
selection要素の選択・マルチセレクト
audioWeb Audio API によるミキシング
save自動保存・プロジェクト復元
データフロー概要
flowchart TD UI["React UI\n(components/editor/)"] HC["useEditor() hook\n(useSyncExternalStore)"] EC["EditorCore\nsingleton"] PB["playback"] TL["timeline"] SC["scenes"] MED["media"] REN["renderer"] SEL["selection"] ZS["Zustand Stores\n(editor / timeline / preview\nassets-panel / properties)"] CANVAS["Canvas\n(WebGL / 2D)"] UI --> HC HC --> EC EC --> PB & TL & SC & MED & REN & SEL UI --> ZS REN --> CANVAS
3 — タイムラインモデル
データ階層

タイムラインのデータは TScene → TimelineTrack → TimelineElement の 3 層で構成される。

階層型名説明
SceneTScene最上位。id / name / tracks[] / bookmarks[] を持つ
TrackTimelineTrackタイプ別トラック（下記 5 種）。elements[] を持つ
ElementTimelineElement各クリップ・オブジェクト（下記 6 種）
トラック種別
video
動画・画像クリップ。メイントラックあり。ミュート・非表示対応
text
テキストオーバーレイ。非表示対応
audio
音声トラック。ミュート対応
sticker
スタンプ・ステッカー。非表示対応
effect
エフェクト・フィルター。非表示対応
エレメント種別
種別主なプロパティ
VideoElementmediaId, startTime, duration, transform, volume, animations, effects
ImageElementmediaId, startTime, duration, transform, opacity, animations
TextElementcontent, font, fontSize, color, transform, animations
AudioElementsourceType (upload | library), volume, muted, buffer
StickerElementstickerId, transform, animations
EffectElementeffectId, paramValues
4 — ストア構成
Zustand ストア一覧

UI 状態は Zustand ストアで管理。コアロジックとの分離が明確で、EditorCore と重複しない UI 固有の状態のみを持つ。

ストア主な状態永続化
useEditorStore isInitializing, isPanelsReady, canvasPresets なし
useTimelineStore snappingEnabled, rippleEditingEnabled, clipboard localStorage
usePreviewStore layoutGuide (platform), overlays.bookmarks localStorage
useAssetsPanelStore activeTab (media / sounds / text / stickers / effects / transitions / captions / filters / adjustment / settings) localStorage
usePanelStore パネルレイアウト・サイズ状態 localStorage
usePropertiesStore 選択要素のプロパティ編集 UI 状態 なし
useSoundsStore ライブラリサウンド一覧・検索 なし
useStickersStore スタンプ一覧・カテゴリ なし
useKeybindingsStore キーバインド設定 localStorage
設計ポイント: EditorCore がコアロジック（再生・レンダリング・タイムライン操作）を担い、Zustand ストアは純粋な UI 状態（パネルタブ・スナッピング ON/OFF 等）を管理する責務分担になっている。
5 — エディタ UI
パネル構成

エディタ画面は 4 つのメインパネルで構成される。components/editor/panels/ 以下にそれぞれのディレクトリがある。

パネルディレクトリ主な役割
アセットpanels/assets/メディア・サウンド・テキスト・スタンプ・エフェクト・フィルター等をブラウズしてタイムラインへドロップ
プレビューpanels/preview/Canvas によるリアルタイム再生プレビュー。レイアウトガイド・ブックマークオーバーレイ表示
プロパティpanels/properties/選択要素の Transform・テキスト・音量・エフェクトパラメータ編集
タイムラインpanels/timeline/マルチトラックタイムライン。ドラッグ・スナッピング・リップル編集・クリップボード
アセットパネルのタブ

useAssetsPanelStore の activeTab で切り替える 10 タブ構成。

  • media — アップロードした動画・画像
  • sounds — ライブラリサウンド・BGM
  • text — テキストプリセット追加
  • stickers — スタンプ・ステッカー
  • effects — 映像エフェクト
  • transitions — クリップ間トランジション
  • captions — 字幕・キャプション（自動文字起こし）
  • filters — カラーフィルター
  • adjustment — 明度・彩度・コントラスト調整
  • settings — プロジェクト設定
6 — セットアップ
必要なもの
  • Bun — JavaScript ランタイム＆パッケージマネージャ
  • Docker + Docker Compose — ローカル DB（PostgreSQL）＆ Redis
フロントエンド開発のみなら Docker は省略可。ただし DB を使う機能は動作しない。
起動手順

1. リポジトリをクローン

git clone https://github.com/OpenCut-app/OpenCut.git
cd OpenCut

2. 環境変数を設定

# macOS / Linux
cp apps/web/.env.example apps/web/.env.local

3. DB と Redis を起動（任意）

docker compose up -d db redis serverless-redis-http

4. 依存インストール & 開発サーバー起動

bun install
bun dev:web

ブラウザで http://localhost:3000 を開くとエディタが起動する。

Docker オールインワン起動

本番ビルドも含めてすべてを Docker で動かす場合:

docker compose up -d

アプリは http://localhost:3100 で利用可能になる。

公式