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 subtitle 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
- Client-side rendering
- Serverless MP4 export
- Open-source video SDK
- Join the Discord (recommended): the fastest way to reach the maintainers, ask implementation questions, discuss ideas, and share feedback.
👉 Join the Twick Discord
We actively monitor Discord for:
- Integration help (React, Next.js, Node, cloud functions)
- Bug reports and troubleshooting
- Feature requests and roadmap feedback
Twick is built and maintained as an open-source project.
If this React video editor SDK helped you ship faster, avoid reinventing timelines, or save at least one late night wrestling with video logic, you can support its continued development here:
Your support helps fund new features, better documentation, performance improvements, and long-term maintenance. Caffeine has a surprisingly high impact on open source velocity.
Twick is a modular React video editor library and cloud toolchain that helps you:
- Build timeline-based editors with React
- Add AI subtitles 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
- 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.
-
Twick Studio (full editor UI):
Professional React-based video editor with timeline, canvas, and export. -
AI Subtitle Generator:
Paste a video URL, get AI-generated captions and timed tracks.
@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@twick/render-server– Node + Puppeteer + FFmpeg rendering server@twick/cloud-transcript– AI transcription to JSON captions@twick/cloud-subtitle-video– Fully automated subtitle 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.
Clone and run the demo locally:
git clone https://github.com/ncounterspecialist/twick.git
cd twick
pnpm install
pnpm build
pnpm previewThen open http://localhost:4173 in your browser.
Install the main editor studio package (it pulls in the required timeline and player dependencies):
npm install --save @twick/studio
# or
pnpm add @twick/studioMinimal integration:
import { LivePlayerProvider } from "@twick/live-player";
import { TwickStudio } from "@twick/studio";
import { TimelineProvider, INITIAL_TIMELINE_DATA } from "@twick/timeline";
import "@twick/studio/dist/studio.css";
export default function App() {
return (
<LivePlayerProvider>
<TimelineProvider
initialData={INITIAL_TIMELINE_DATA}
contextId="studio-demo"
>
<TwickStudio
studioConfig={{
videoProps: {
width: 720,
height: 1280,
},
}}
/>
</TimelineProvider>
</LivePlayerProvider>
);
}For Next.js or more advanced setups, refer to the docs.
Twick supports two primary export paths:
-
Browser rendering (
@twick/browser-render)- Client-side export using WebCodecs API for video encoding + FFmpeg.wasm for audio/video muxing
- Best for short clips, previews, prototypes, and environments without backend infra
-
Server rendering (
@twick/render-server)- Node-based rendering with Puppeteer + FFmpeg
- Best for production workloads, long videos, and full audio support
High-level guidance:
- Development / prototyping: start with
@twick/browser-render - Production: use
@twick/render-server(or@twick/cloud-export-videoon AWS Lambda)
See the individual package READMEs for full examples and configuration.
Installation
npm install @twick/browser-render
# or
pnpm add @twick/browser-renderReact hook usage with Twick Studio
import { useBrowserRenderer, type BrowserRenderConfig } from "@twick/browser-render";
import { TwickStudio, LivePlayerProvider, TimelineProvider, INITIAL_TIMELINE_DATA } from "@twick/studio";
import "@twick/studio/dist/studio.css";
import { useState } from "react";
export default function VideoEditor() {
const { render, progress, isRendering, error, reset } = useBrowserRenderer({
width: 720,
height: 1280,
includeAudio: true,
autoDownload: true,
});
const [showSuccess, setShowSuccess] = useState(false);
const onExportVideo = async (project, videoSettings) => {
try {
const variables = {
input: {
...project,
properties: {
width: videoSettings.resolution.width || 720,
height: videoSettings.resolution.height || 1280,
fps: videoSettings.fps || 30,
},
},
} as BrowserRenderConfig["variables"];
const videoBlob = await render(variables);
if (videoBlob) {
setShowSuccess(true);
return { status: true, message: "Video exported successfully!" };
}
} catch (err: any) {
return { status: false, message: err.message };
}
};
return (
<LivePlayerProvider>
<TimelineProvider initialData={INITIAL_TIMELINE_DATA} contextId="studio">
<TwickStudio
studioConfig={{
exportVideo: onExportVideo,
videoProps: { width: 720, height: 1280 },
}}
/>
{/* Progress Overlay */}
{isRendering && (
<div className="rendering-overlay">
<div>Rendering... {Math.round(progress * 100)}%</div>
<progress value={progress} max={1} />
</div>
)}
{/* Error Display */}
{error && (
<div className="error-message">
{error.message}
<button onClick={reset}>Close</button>
</div>
)}
</TimelineProvider>
</LivePlayerProvider>
);
}Limitations (summary)
- Requires WebCodecs (Chrome / Edge; not Firefox / Safari)
- Requires FFmpeg.wasm core files in public folder for audio/video muxing
- Limited by client device resources and memory
- Long or complex renders are better handled on the server
For full details, see the @twick/browser-render README.
Installation
npm install @twick/render-server
# or
pnpm add @twick/render-serverQuick start – scaffold a server
npx @twick/render-server init
cd twick-render-server
npm install
npm run devThis creates an Express server with:
POST /api/render-video– render Twick projects to MP4GET /download/:filename– download rendered videos (with rate limiting)
Programmatic usage
import { renderTwickVideo } from "@twick/render-server";
const videoPath = await renderTwickVideo(
{
input: {
properties: {
width: 1920,
height: 1080,
fps: 30,
},
tracks: [
{
id: "track-1",
type: "element",
elements: [
{
id: "text-1",
type: "text",
s: 0,
e: 5,
props: {
text: "Hello World",
fill: "#FFFFFF",
},
},
],
},
],
},
},
{
outFile: "output.mp4",
quality: "high",
outDir: "./videos",
}
);
console.log("Video rendered:", videoPath);Integrate server export with Twick Studio
import { TwickStudio, LivePlayerProvider, TimelineProvider } from "@twick/studio";
export default function VideoEditor() {
const onExportVideo = async (project, videoSettings) => {
try {
const response = await fetch("http://localhost:3001/api/render-video", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
variables: {
input: {
...project,
properties: {
width: videoSettings.resolution.width,
height: videoSettings.resolution.height,
fps: videoSettings.fps,
},
},
},
settings: {
outFile: `video-${Date.now()}.mp4`,
quality: "high",
},
}),
});
const result = await response.json();
if (result.success) {
window.open(result.downloadUrl, "_blank");
return { status: true, message: "Video exported successfully!" };
}
} catch (err: any) {
return { status: false, message: err.message };
}
};
return (
<LivePlayerProvider>
<TimelineProvider contextId="studio">
<TwickStudio
studioConfig={{
exportVideo: onExportVideo,
videoProps: { width: 1920, height: 1080 },
}}
/>
</TimelineProvider>
</LivePlayerProvider>
);
}Server requirements (summary)
- Node.js 20+
- FFmpeg installed
- Linux or macOS (Windows not supported)
- 2 GB RAM minimum (4 GB+ recommended for HD)
For full details, see the @twick/render-server README.
-
Main docs & API reference:
-
In-action guides and examples:
-
Troubleshooting:
-
Discord (primary support channel) – talk directly to the maintainers, share ideas, and get real-time help:
👉 Join the Twick Discord -
GitHub Issues – bug reports, feature requests, and roadmap discussion.
If you are evaluating Twick for a production product and need architectural guidance, please start in Discord – we’re happy to discuss design options and trade-offs.
Each package can be developed independently:
# Build a specific package
pnpm build:media-utils
# Run development server
pnpm devFor detailed contribution guidelines, see Contribution Guide
This React Video Editor SDK is licensed under the Sustainable Use License (SUL) v1.0.
- Free for commercial and non-commercial application use
- Can be modified and self-hosted
- Cannot be sold, rebranded, or redistributed as a standalone SDK or developer tool
For resale or SaaS redistribution of this library, please contact contact@kifferai.com.
Full terms: see License.
{
"@context": "https://schema.org",
"@type": "SoftwareApplication",
"name": "Twick - React Video Editor SDK",
"description": "Open-source React Video Editor Library with AI Caption Generation, Timeline Editing, Canvas Tools & MP4 Export for building custom video applications",
"applicationCategory": "DeveloperApplication",
"operatingSystem": "Web, Linux, macOS, Windows",
"offers": {
"@type": "Offer",
"price": "0",
"priceCurrency": "USD"
},
"keywords": "React Video Editor, Video Editor SDK, AI Caption Generation, React Video Editor Library, Timeline Editor, Canvas Video Editing, MP4 Export, Video Editing Library, React Canvas, Serverless Video Rendering, AI Subtitle Generation, Video Transcription, Open Source Video Editor",
"softwareVersion": "0.15.0",
"url": "https://github.com/ncounterspecialist/twick",
"codeRepository": "https://github.com/ncounterspecialist/twick",
"programmingLanguage": "TypeScript, JavaScript, React",
"author": {
"@type": "Organization",
"name": "Twick"
},
"license": "https://github.com/ncounterspecialist/twick/blob/main/LICENSE.md",
"documentation": "https://ncounterspecialist.github.io/twick",
"downloadUrl": "https://www.npmjs.com/package/@twick/studio",
"softwareHelp": "https://ncounterspecialist.github.io/twick/docs/in-action",
"featureList": [
"React Video Editor SDK",
"AI Caption Generation with Google Vertex AI (Gemini)",
"Timeline-based video editing",
"Canvas tools for video manipulation",
"Serverless MP4 export with AWS Lambda",
"Real-time video preview",
"Automated subtitle generation",
"Video transcription API",
"React components for video editing",
"Open-source video editor library"
],
"screenshot": "https://development.d1vtsw7m0lx01h.amplifyapp.com",
"discussionUrl": "https://discord.gg/DQ4f9TyGW8"
}Built for developers shipping video products. Star this repo to follow updates on the Twick React video editor SDK with AI caption generation.