What's the fastest way to add a video editor to a React app?

npm install @clipkit/editor, then render and you have a working timeline editor backed by browser storage. Production readiness is two more props: onSourceChange to persist the document JSON to your backend, and an AssetStore implementation so uploads land in your S3, Supabase, or API. The component is Apache-2.0, so there is no license gate between the prototype and shipping it.

Does it work with Next.js?

Yes; this site embeds the same component in a Next.js app. It's a browser component (GPU preview, IndexedDB, WebCodecs), so render it client-side: a 'use client' boundary, with a dynamic import if your page otherwise server-renders. No special server configuration is involved because there is no server component to the editor.

Where do projects and uploaded media live?

Wherever you put them. The document is JSON handed to you on every edit through onSourceChange; store it like any row. Media flows through an injected AssetStore (IndexedDB by default, your backend when you implement the interface). The editor package has zero database code and no server of its own, which is precisely what makes it embeddable.

Can users export video for free, without my servers rendering?

Yes: export runs in the browser through WebCodecs on the user's own GPU, so the free path costs you nothing per export. Speed follows their hardware (about 222 fps at 1080p on an Apple M4 in our measurements, single digits on older integrated laptops), so keep the onRender server path in your back pocket for users who need guaranteed speed or ProRes/AV1/alpha output.

Can an AI agent create the video and a human edit it?

Yes, and it's the pipeline the stack was designed around. The editor's document is an open JSON protocol that agents author over MCP, so a machine drafts the video and your user polishes it on the timeline, or the other way around. The editor cannot tell which kind of author produced the document, which is exactly the property that makes the pipeline composable.

React video editor: embed a timeline in your app

This is the integration guide for putting a real timeline video editor inside a React app: install, embed, wire storage, persist documents, export MP4s. The component is @clipkit/editor (Apache-2.0), and every snippet below is the actual API, so you can follow along in a scratch project and have an editor rendering in a few minutes.

If you're still deciding whether to embed or build the editor yourself, read the canvas video editor post first; this one assumes you'd rather ship this week.

1. Install and render#

npm install @clipkit/editor

import { Editor } from "tok-str">'@clipkit/editor';

export function VideoEditor({ project }) {
  return <Editor initialSource={project} />;
}

initialSource is the one required prop: a Source document, which is JSON conforming to the Clipkit Protocol. A minimal one is a few lines (dimensions, duration, an elements array), and the editor will happily open an empty composition your users build from scratch.

What you just rendered is the full surface: timeline, inspector, keyframes, expressions, every panel (ADVANCED_CONFIGURATION, the default). A configuration is plain data describing which views render over the same store, so when your product wants a tighter surface, pass BASIC_CONFIGURATION or define a custom one (say, timeline plus inspector, no effects panel): it's a variable, not a fork.

2. Persist the document#

The document is state your app owns. Wire onSourceChange and store the JSON like any other row:

<Editor
  initialSource={project}
  onSourceChange={(source) => saveDraft(projectId, source)} "tok-cmt">// debounce as you like
/>

There's no hidden server sync to fight: the editor mutates the document, tells you, and you decide where it lives (Postgres column, S3 object, local file). This is also what makes the document portable: the same JSON can be generated by your backend from data, written by an AI agent over MCP, or diffed in code review, and the editor opens all of it identically. The machine-drafts, human-polishes pipeline falls out of that for free.

3. Wire your storage#

Media uploads flow through an AssetStore port injected as a prop. Out of the box:

import { createLocalAssetStore, createMemoryAssetStore } from "tok-str">'@clipkit/editor';

const assetStore = createLocalAssetStore(); "tok-cmt">// IndexedDB, the default if you pass nothing

For production you'll usually implement the AssetStore interface against your own backend (S3, Supabase, your API) and pass it in. The editor library contains zero database code by design; it asks your adapter to put and get bytes, and everything about auth, buckets, and CDNs stays in your codebase where it belongs.

4. Export#

Preview runs on @clipkit/runtime, a deterministic GPU compositor (WebGPU with a WebGL2 fallback), and the editor exports MP4 directly in the browser through WebCodecs: no render server, no per-export cost. Determinism is the property doing the work: the frame your user scrubs to is byte-identical to the frame in the exported file.

Set expectations by hardware, because in-browser encode speed is the user's GPU: we measure about 222 fps at 1080p on an Apple M4 and 4 to 5 fps on an older Intel i9. For guaranteed speed or formats browsers can't encode (ProRes, AV1, alpha channel), wire the onRender prop to a server path instead: a local @clipkit/renderer on your own hardware, or the hosted render API. Same document either way; only where pixels get computed changes.

5. Fit and finish#

theme accepts 'light' | 'dark' and follows the prop live, so the editor tracks your app's theme toggle. The backend prop pins the preview to 'webgpu' or 'webgl2' if you need to (default 'auto'). And because the component is Apache-2.0 all the way through, styling or forking the UI when you outgrow configuration is a normal open-source move, not a licensing conversation.

What this costs#

The editor is free, commercially, under Apache-2.0. The runtime underneath is BSL 1.1 with a free production tier: unlimited dev, test, and non-commercial use, and up to 250 rendered output-minutes per month in production before a commercial license enters. An embed whose users export in-browser and stays under that tier runs at zero marginal cost. The architecture page lays out the full stack and licensing layer by layer.

The ten-minute version#

Install the package, render <Editor initialSource={...} />, persist onSourceChange, and you have a working video editor in your React app backed by browser storage. Add your AssetStore when uploads need to hit your backend, and an onRender server path when your users' export needs outgrow their laptops. The no-login editor on this site is this exact component running against a demo adapter, so you can feel the end state before writing a line.

Add a video editor to your React app