内容摘录
Twick – React Video Editor SDK with AI Caption Generation
**Twick** is an open-source **React Video Editor Library & SDK** featuring AI caption generation, timeline editing, canvas tools, and MP4 export for building custom video applications.
Twick enables developers to build professional video editing experiences with **AI-powered caption generation**, real-time timeline editing, and serverless video rendering. It combines React-based canvas tools, AI caption generation using Google Vertex AI (Gemini), and cloud-native MP4 export—all in TypeScript. Whether you're building a video SaaS, content creation platform, or automated video pipeline, Twick provides the React video editor components you need to ship fast.
**Key features:**
AI caption generation
React timeline editor
Canvas-based video editing
**GPU-accelerated GL effects** (WebGL-based video post-processing)
Client-side rendering
Serverless MP4 export
Open-source video SDK
CI
Deploy Documentation
!Active Developers
!Total Video Exported
---
Connect with the Twick team
The fastest way to reach the maintainers, ask implementation questions, discuss ideas, and share feedback:
<a href="https://discord.gg/DQ4f9TyGW8">
<img src="https://img.shields.io/badge/Join_Twick_Discord-Community-5865F2?style=for-the-badge&logo=discord&logoColor=white" width="220" alt="Join the Twick Discord">
</a>
We actively monitor Discord for:
**Integration help** (React, Next.js, Node, cloud functions)
**Bug reports and troubleshooting**
**Feature requests and roadmap feedback**
---
What is Twick?
Twick is a modular **React video editor library** and cloud toolchain that helps you:
Build **timeline-based editors** with React
Add **AI captions and transcripts** to any video
Render MP4s using **browser WebCodecs** or **server-side FFmpeg**
Integrate video editing into SaaS products, internal tools, or automation pipelines
---
Who is this for?
**React / Frontend engineers** building video editing or timeline UIs
**AI / ML teams** adding transcription, captioning, or video automation
**Product / Indie founders** shipping video products without building video infra from scratch
**Platform teams** standardizing video processing across services
**Not a fit:** non-technical creators looking for a ready-made consumer editor. Twick is a developer SDK.
---
Live demos
**Twick Studio (full editor UI)** — Professional React-based video editor with timeline, canvas, and export.
<a href="https://development.d1vtsw7m0lx01h.amplifyapp.com">
<img src="https://img.shields.io/badge/Twick_Studio-Live_Demo-61DAFB?style=for-the-badge&logoColor=black" width="220" alt="Open Twick Studio">
</a>
**AI Caption Generator** — Paste a video URL, get AI-generated captions and timed tracks.
<a href="https://development.d1vtsw7m0lx01h.amplifyapp.com/subtitles">
<img src="https://img.shields.io/badge/Generate_AI_Caption-Live_Demo-8B5CF6?style=for-the-badge&logoColor=white" width="240" alt="Generate AI Caption with Twick">
</a>
---
Support matrix
**Node**: >= 20 (LTS or newer)
**Package manager**: pnpm 8.x (repo is configured with pnpm-lock.yaml)
**OS (dev/CI)**: macOS, Linux (Ubuntu/Debian). Windows is possible but not officially tested.
**Browsers (editor UI)**: Latest Chrome/Chromium, Firefox, Safari.
**Browsers (browser MP4 export)**: Requires WebCodecs (Chrome / Edge). Firefox / Safari are not supported for browser-side MP4 export.
See ENVIRONMENT.md for environment variables and cloud-function configuration details.
---
Choose your path
Pick the integration path that best matches your use case:
**Full Studio (fastest to production)**
Use @twick/studio for a complete, opinionated editor UI (timeline + canvas + export).
**Best for**: SaaS products and internal tools that want a full editor quickly.
**Get started**: follow **“Quick start – Use Twick Studio in your app”** below.
**Core editor shell (custom UI)**
Compose your own UI using @twick/timeline, @twick/canvas, @twick/live-player, and friends.
**Best for**: teams that need deep customization of the editor surface.
**Get started**: start from the examples in packages/examples and wire timeline/canvas/player into your own components.
**Headless / pipeline (no UI)**
Use @twick/browser-render, @twick/render-server, and Twick Cloud Functions (@twick/cloud-*) to build programmatic video workflows.
**Best for**: automation, batch rendering, backend-heavy products, and AI pipelines.
**Get started**: see **“Video export options”** and the cloud function packages in packages/cloud-functions/*.
---
Key packages
**@twick/studio** – All-in-one, production-ready React video editor UI
**@twick/canvas** – Fabric.js-based canvas tools for video/image editing
**@twick/timeline** – Timeline model, tracks, operations, and undo/redo
**@twick/live-player** – Video playback synchronized with timeline state
**@twick/browser-render** – WebCodecs-based browser MP4 rendering (uses @twick/ffmpeg-web for audio muxing)
**@twick/ffmpeg-web** – FFmpeg.wasm wrapper for webpack, Next.js, CRA, and Vite (used by @twick/browser-render)
**@twick/render-server** – Node + Puppeteer + FFmpeg rendering server
**@twick/effects** – GL shader-based video effects (sepia, vignette, pixelate, warp, and more coming), powered by @twick/gl-runtime
**@twick/cloud-transcript** – AI transcription to JSON captions
**@twick/cloud-caption-video** – Fully automated caption project generation from a video URL
**@twick/cloud-export-video** – Serverless MP4 export via AWS Lambda containers
**@twick/mcp-agent** – MCP agent for Claude Desktop + Twick Studio workflows
See the full documentation for detailed APIs and examples.
---
Quick start – Monorepo
Clone and run the demos locally. Two example apps are included:
**Vite (recommended)** – packages/examples
Uses the @twick/browser-render Vite plugin so FFmpeg and WASM assets are copied to public/ automatically.
Then open http://localhost:4173 (or the port shown) in your browser.
**Create…