Twick Monorepo

Twick is a modular SDK for building timeline‑based video editors. The main packages live under packages/ (timeline, canvas, live‑player, video‑editor, studio, etc.) and are wired together in the example apps and in twick-web.

Public assets & providers

Twick supports both user assets (local uploads, URLs) and public assets from providers like Pexels, Unsplash, and Pixabay. Studio surfaces these under the My assets and Public tabs in the media panels.

How it works:
- Frontend uses an AssetLibrary abstraction to list, search, and upload assets.
- Studio’s implementation calls twick-web API routes (/api/assets/providers/config, /api/assets/search) for public assets and uses IndexedDB for user uploads.
- Timeline elements (video, audio, image) just store the resolved url and optional asset metadata.
How to configure public providers:
1. Set provider API keys in the twick-web environment:
```
# Pexels
PEXELS_API_KEY=your_pexels_api_key

# Unsplash
UNSPLASH_ACCESS_KEY=your_unsplash_access_key

# Pixabay
PIXABAY_API_KEY=your_pixabay_api_key
```
2. Restart twick-web:
```
cd twick-web
pnpm dev            # or next start in production
```
3. Open Studio (see packages/studio) → any media panel (Video / Audio / Image) → switch to Public and use the provider dropdown + search to browse assets.
Extending providers / asset manager:
- See ASSET_MANAGER.md in the repo root for a full architecture overview and a step‑by‑step guide to adding new providers or changing how assets are stored and surfaced in Studio.

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

Connect with the Twick team

The fastest way to reach the maintainers, ask implementation questions, discuss ideas, and share feedback:

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.

AI Caption Generator — Paste a video URL, get AI-generated captions and timed tracks.

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.

git clone https://github.com/ncounterspecialist/twick.git
cd twick

pnpm install
pnpm build
pnpm --filter=@twick/examples preview

Then open http://localhost:4173 (or the port shown) in your browser.

Create React App – packages/examples-cra
Uses a copy script before start/build so the same assets are available without Vite.

pnpm install
pnpm --filter=@twick/examples-cra build
pnpm --filter=@twick/examples-cra start

Both run smoothly with no manual copying of FFmpeg or WASM files.

Running the examples

| App | Path | Command to run | |-----|------|----------------| | Vite | packages/examples | pnpm --filter=@twick/examples dev or pnpm --filter=@twick/examples preview (after build) | | Create React App | packages/examples-cra | pnpm --filter=@twick/examples-cra start (prestart copies assets automatically) |

The Vite examples use twickBrowserRenderPlugin() in vite.config.ts; the CRA examples use prestart/prebuild to run @twick/browser-render/scripts/copy-public-assets.js. In both cases, FFmpeg and WASM files are handled for you.

Quick start – Use Twick Studio in your app

Install the main editor studio package (it pulls in the required timeline and player dependencies):

npm install --save @twick/studio
# or
pnpm add @twick/studio

Minimal integration:

import { LivePlayerProvider } from "@twick/live-player";
import { TwickSt

Twick

Install / Use

README