Как собрать свой CapCut на React и TypeScript

Представьте, что вам нужно встроить видеоредактор прямо в веб-приложение. Не просто кнопку «загрузить файл», а полноценный таймлайн, склейку нескольких дорожек, наложение текста и переходы. Обычно в этот момент разработчики начинают гуглить платные SDK или пытаются подружить ffmpeg с браузером через WebAssembly, что превращается в отдельный вид боли.

Недавно наткнулся на проект Kimu (репозиторий trykimu/videoeditor). Это open-source альтернатива тяжеловесным редакторам вроде CapCut или Canva, построенная на стеке React и Remotion. Проект пока в активной разработке, но архитектурно он выглядит очень любопытно для тех, кто хочет программно управлять видеомонтажом.

Что под капотом

В основе Kimu лежит Remotion — это фреймворк, который позволяет создавать видео с помощью React. Если вы умеете верстать компоненты, значит, вы умеете делать анимации для видео. Kimu берет эту концепцию и оборачивает её в привычный интерфейс десктопного редактора.

Разработчики выбрали современный стек:

• Frontend: TypeScript, React, pnpm.
• Backend: Python (FastAPI) и Node.js (для рендеринга).
• Хранилище: Поддержка офлайн-режима и облачная синхронизация.

Интересно, что проект использует двойное лицензирование. Часть кода завязана на лицензию Remotion, так что если планируете коммерческое использование, стоит внимательно изучить LICENSE.md.

Основные возможности

Проект пытается закрыть сразу несколько сложных задач, которые обычно возникают при работе с медиа в вебе.

Многодорожечное редактирование

Это база любого редактора, но реализовать её в браузере плавно — та еще задача. Здесь реализован полноценный таймлайн с поддержкой слоев. Можно накладывать видео друг на друга, подрезать их и управлять привязкой (snapping) элементов.

Предпросмотр в реальном времени

Главная проблема при работе с видео в вебе — задержки. Kimu обещает низкий latency при воспроизведении. Вы меняете положение текста или фильтр и сразу видите результат без необходимости ждать рендера каждого кадра.

ИИ-помощник Vibe

Сейчас сложно найти проект без приставки AI, и Kimu не исключение. В редактор встроен ассистент, которому можно текстом описать идею. Он сам накидает таймлайн, расставит тайминги и предложит макеты. Пока это выглядит скорее как эксперимент, но потенциал для автоматизации рутины огромный.

Как это запустить и пощупать

Развернуть проект локально можно через Docker, что избавляет от настройки окружения для Python и Node.js по отдельности.

git clone https://github.com/trykimu/videoeditor.git
cd videoeditor
docker compose up

Если хочется покопаться в коде и запустить всё в режиме разработки, процесс чуть сложнее. Нужно установить зависимости через pnpm, запустить фронтенд и два бэкенда (один на TypeScript для рендера, другой на Python для основной логики).

Для фронтенда:

pnpm i
pnpm run dev

Для бэкенда рендеринга:

pnpm dlx tsx app/videorender/videorender.ts

И основной бэкенд на Python:

uv run backend/main.py

Кстати, в файле /app/utils/api.ts нужно будет переключить флаг isProduction в false, чтобы локальная разработка заработала корректно.

Кому это пригодится

Проект вряд ли заменит профессиональный софт для монтажеров прямо сейчас, но он идеален для специфических задач.

Например, если вы строите сервис для автоматической генерации рекламных креативов. Или если вам нужно дать пользователям вашего SaaS-продукта простой инструмент для обрезки видео и наложения логотипов без перехода на сторонние сайты.

В планах у авторов полная интеграция всех API Remotion, что даст еще больше контроля над эффектами и переходами.

Kimu — это смелая попытка сделать сложный инструмент доступным и открытым. Да, документация пока скудновата, а процесс запуска требует некоторой сноровки с разными пакетными менеджерами. Но если вам нужен фундамент для собственного видеоредактора на React, это отличная точка входа.

Проект активно растет (уже больше 1200 звезд на GitHub), так что за ним точно стоит последить или даже закинуть пару Pull Request-ов в их Smart Media Library.