# Twick: a React SDK for building timeline video editors

> Twick is a modular React SDK for timeline-based video editing, with AI caption generation, canvas tools, WebGL effects and two export paths, browser WebCodecs or server-side FFmpeg, and it comes in three shapes depending on how much of the interface you want to own.

**ncounterspecialist/twick** — AI-powered video editor SDK built with React. Features canvas timeline, drag-and-drop editing, AI captions, and serverless MP4 export. Perfect for building custom video apps.

- Repository: https://github.com/ncounterspecialist/twick
- Website: https://ncounterspecialist.github.io/twick/
- Stars: 542 · Forks: 61
- Language: TypeScript
- License: NOASSERTION
- Published: 2026-10-22 · Updated: 2026-10-22 · Language: en
- Canonical page: https://hysenlabs.com/projects/ncounterspecialist-twick

## A monorepo of editor pieces, not one component

Twick is a modular SDK for building timeline-based video editors, and the main packages live under packages/, covering the timeline, the canvas, the live player, the video editor and Studio among others, wired together in the example apps and in twick-web. That layout is the single most important fact about the project, because it is what makes the three integration paths possible. The published description calls Twick an open-source React Video Editor Library and SDK with AI caption generation, timeline editing, canvas tools and MP4 export, and the monorepo is a pnpm workspace driven by turbo, with a per-package build and dev script for every piece, from @twick/canvas and @twick/timeline through to @twick/studio, @twick/render-server, @twick/browser-render, @twick/visualizer, @twick/media-utils, @twick/workflow and @twick/mcp-agent. The last push to the repository was on 2026-06-04, with the most recent release v0.15.31 on 2026-03-18.

## The three integration paths

The project tells you to pick the path that matches your use case, and the three options are clearly separated. Full Studio is the fastest route to production, using @twick/studio for a complete, opinionated editor UI with timeline, canvas and export, and it is aimed at SaaS products and internal tools that want a full editor quickly. The core editor shell is for teams that need deep customisation of the editor surface, composing your own UI from @twick/timeline, @twick/canvas, @twick/live-player and friends, starting from the examples in packages/examples. The headless path uses @twick/browser-render, @twick/render-server and the Twick Cloud Functions packages under @twick/cloud-*, and is meant for automation, batch rendering, backend-heavy products and AI pipelines with no UI at all. The stated audience is React and frontend engineers, AI and ML teams adding transcription or captioning, product and indie founders shipping video products, and platform teams standardising video processing. The stated non-fit is non-technical creators, because Twick is a developer SDK.

## Where the rendering actually happens

There are two export paths and they are not interchangeable, and the browser support matrix says so plainly. For browsers, the editor UI itself works on the latest Chrome or Chromium, Firefox and Safari, but the browser MP4 export requires WebCodecs, which means Chrome and Edge only, and Firefox and Safari are not supported for browser-side MP4 export. The alternative is rendering MP4s server-side with FFmpeg, or rendering in the browser with WebCodecs. Alongside that there are GPU-accelerated GL effects, which the feature list describes as WebGL-based video post-processing, and client-side rendering as a named capability. The combination is what makes Twick more than a timeline widget, because a timeline that cannot produce a file is a demo, and the two paths cover the case where the browser can encode but the target platform is Safari, and the case where the browser cannot.

## AI captions, and where the model comes from

The AI part is caption generation and transcripts, and the project is specific about the provider. The description combines React-based canvas tools, AI caption generation using Google Vertex AI with Gemini, and cloud-native MP4 export, all in TypeScript. There is a live demo for it separate from the Studio demo, where you paste a video URL and get AI-generated captions and timed tracks back. The stated audience for that piece is AI and ML teams adding transcription, captioning or video automation, and the headless integration path exists specifically for AI pipelines, which is the combination that makes sense of the whole layout: a captioning service that runs videos through a model and returns a finished MP4 without a browser in the loop. The environment and cloud function configuration details live in ENVIRONMENT.md, and the repository also carries a TROUBLESHOOTING.md and a STYLE_GUIDE.md.

## Assets: user uploads and public providers

Twick supports two kinds of assets, and the studio surfaces them in two tabs in the media panels, labelled My assets and Public. User assets are local uploads and URLs, and they are stored in IndexedDB in the studio implementation, while the timeline elements, meaning video, audio and image, just store the resolved url and optional asset metadata. Public assets come from providers such as Pexels, Unsplash and Pixabay, and the frontend lists, searches and uploads them through an AssetLibrary abstraction, with the studio implementation calling twick-web API routes for provider config and search. Configuring the providers means setting API keys in the twick-web environment.

```bash
# Pexels
PEXELS_API_KEY=your_pexels_api_key

# Unsplash
UNSPLASH_ACCESS_KEY=your_unsplash_access_key

# Pixabay
PIXABAY_API_KEY=your_pixabay_api_key
```

After that you restart twick-web, and the documentation gives the command.

```bash
cd twick-web
pnpm dev            # or next start in production
```

Then you open Studio, go to any media panel, switch to Public and use the provider dropdown and search. Adding another provider is documented separately in ASSET_MANAGER.md, which covers the architecture and the steps for changing how assets are stored and surfaced.

## The support matrix, which is the real constraint

The compatibility section is short and worth reading before you plan. Node has to be 20 or newer, either LTS or newer still. The package manager has to be pnpm 8.x, and the repository is configured with a pnpm-lock.yaml, so an npm-based pipeline will not behave the way the scripts expect. For development and CI the operating systems are macOS and Linux, with Ubuntu and Debian named, and Windows is said to be possible but not officially tested. For the editor UI the browsers are the latest Chrome or Chromium, Firefox and Safari, and for browser-side MP4 export you need WebCodecs, which is Chrome and Edge only. The last push to the repository was on 2026-06-04, so the project is not dormant, but the release and the repository have been quiet for a few months, and the version numbering is still in the zero fifteen range.

## Conclusion

Twick fits a React team that needs a timeline editor embedded in a product rather than a standalone app, because the packages are split so you can take the full studio, compose your own interface from the timeline and canvas primitives, or run it headless in a pipeline. It does not fit a team that needs browser-side MP4 export on Firefox or Safari, because that path requires WebCodecs and is only supported in Chrome and Edge, and it does not fit a non-technical creator, since the project states plainly that it is a developer SDK and not a consumer editor. Before you commit, read ENVIRONMENT.md for the environment variables and cloud function configuration, decide which of the three integration paths you need, and check the support matrix, because the package manager requirement is pnpm 8.x with the repository configured for it, so an npm-based pipeline will not work as written.

## FAQ

### What are the three ways to integrate Twick?

You can use @twick/studio for a complete opinionated editor UI, compose your own interface from the timeline, canvas and live-player packages, or go headless with @twick/browser-render, @twick/render-server and the @twick/cloud-* functions for automation and batch rendering with no UI at all.

### Can Twick export MP4 in the browser on Firefox or Safari?

No. The support matrix states that browser MP4 export requires WebCodecs, which means Chrome and Edge, and that Firefox and Safari are not supported for browser-side MP4 export. The alternative is server-side rendering with FFmpeg, through @twick/render-server.

### Which AI service does Twick use for caption generation?

The project describes AI caption generation using Google Vertex AI with Gemini, and there is a separate live demo where you paste a video URL and get AI-generated captions and timed tracks back.

### How do public stock assets work in Twick Studio?

Public assets come from providers such as Pexels, Unsplash and Pixabay, configured through API keys set in the twick-web environment. The studio surfaces them under the Public tab in the media panels, listing and searching through twick-web API routes, while user uploads and URLs are stored in IndexedDB under My assets.

## Sources

- [Issues](https://github.com/ncounterspecialist/twick/issues)
- [ncounterspecialist/twick on GitHub](https://github.com/ncounterspecialist/twick)
- [Project website](https://ncounterspecialist.github.io/twick/)
- [README](https://github.com/ncounterspecialist/twick/blob/main/README.md)
- [Releases](https://github.com/ncounterspecialist/twick/releases)

---

Hysen Labs editorial analysis, written from the project's own repository and release notes. Cite the canonical page: https://hysenlabs.com/projects/ncounterspecialist-twick