Cutforge

A non-linear video editor that runs entirely in the browser. Import, cut, composite and export — all on the user's own machine. Nothing gets uploaded, there's no server-side transcoding, and the render happens on the local GPU.

It began as a prototype and has turned into a fairly complete editor: a multi-track timeline, real-time GPU preview, a Web Audio mixer, and a WebCodecs export path that runs faster than realtime. The same codebase ships two ways — as an embeddable library (@cutforge/editor) and as a standalone app.

What it does

The timeline is multi-track (video and audio) with the editing moves you'd expect: drag clips around, trim from either edge, split at the playhead, duplicate, delete, and snapping that scales with the zoom level. Most of it has a keyboard shortcut.

Preview composites every active clip onto a canvas at the current playhead, in real time, through WebGPU. Each clip carries its own transform (position, scale, rotation, opacity), color (brightness/contrast/saturation) and timing (fade in/out). Audio runs through a Web Audio graph locked to the timeline: per-clip volume and fades, mute/solo per track, and a master bus.

Importing is a file picker or a drag-and-drop; the app reads duration, dimensions and a poster frame up front and only decodes audio when it actually needs a waveform. Export walks the timeline frame by frame through a WebCodecs VideoEncoder and muxes to mp4 or webm, falling back to MediaRecorder on browsers that won't let it configure the encoder. Projects are saved locally — media in OPFS, metadata in IndexedDB — so closing the tab doesn't lose your work.

Run it

# One-time: build the Rust/WASM core.
cd engine-core
RUSTFLAGS="-C target-feature=+simd128" wasm-pack build --target web --out-dir pkg --release
cd ..

npm install
npm run dev

Then open http://localhost:5173.

You'll need a current browser — Chrome/Edge/Arc/Brave 105+, Firefox 105+, or Safari 17+. The runtime leans on OffscreenCanvas, WebCodecs and a GPU context (WebGPU when it's there, WebGL2 otherwise). There's no Canvas2D main-thread fallback: below that floor attachCanvas throws, so the user gets a clear "upgrade your browser" rather than a silently degraded editor.

One thing to watch in production: the AudioWorklet + SharedArrayBuffer audio path only engages when the page is cross-origin isolated. The dev server already sends the COOP/COEP headers; your own origin has to send them too, or the audio engine quietly drops back to the AudioBufferSourceNode path.

Embedding

The editor is published as a library. Drop it into any DOM node:

import { createEditor } from '@cutforge/editor';
import '@cutforge/editor/style.css';

const editor = createEditor(document.getElementById('app')!, {
  license: 'CF1.…', // omit to run the demo build
});
// editor.destroy() when you're done

Or as a React component:

import { Editor } from '@cutforge/editor';
import '@cutforge/editor/style.css';

<Editor license="CF1.…" />;

With no license key it runs in demo mode — exports are watermarked and capped at 60 seconds, and saving projects is disabled. A valid key lifts all of that.

Personalization & integration

Every option below is independent — pass only what you need. The same options work on createEditor(el, options) and <Editor {...options} />.

const editor = createEditor(el, {
  // Theme: a named preset, or a full { base, colors, accent, fontFamily, cssVars }.
  theme: { ...themePresets.midnight, accent: '#ff0066' },

  // Full-stylesheet escape hatch beyond design tokens (scope under .cutforge-root).
  customCss: '.cutforge-root .topbar { height: 52px; }',

  // White-label the chrome.
  branding: { productName: 'Acme Studio', logo: '/logo.svg' },
  chrome: {
    hide: ['settings'], labels: { export: 'Render' },
    actions: [{ id: 'review', label: 'Send to review', onClick: () => post(ed.getProject()) }],
  },

  // Localize + RTL (unknown keys fall back to English).
  i18n: { locale: 'fr', messages: { 'topbar.export': 'Exporter' } },

  // Open already loaded and laid out on the timeline.
  preset: {
    media: [{ url: '/intro.mp4' }, { url: '/outro.mp4' }],
    arrange: 'sequence',
    project: { aspectRatio: '16:9', name: 'Promo' },
  },

  // Policy hooks (return false to block; a File from onBeforeImport replaces the input).
  hooks: {
    canImport: (f) => f.size < 500_000_000,
    onBeforeImport: (f) => f,            // e.g. stripExif(f)
    onBeforeExport: ({ project }) => project.duration < 600,
  },
});

React to the editor (also available as <Editor onReady onTimeUpdate … /> props):

editor.on('save', ({ project }) => fetch('/api/projects', { method: 'POST', body: project }));
editor.on('export-complete', ({ blob, filename }) => upload(blob, filename));
editor.on('error', ({ message }) => toast(message));
// events: ready · timeupdate · play · pause · change · save · export-progress · export-complete · error

Drive the editor from your own UI / automation:

await editor.load(file);
editor.play(); editor.seek(2); editor.pause();
const json = editor.getProject();   // persist host-side
editor.loadProject(json);           // restore later
const { blob } = await editor.export({ format: 'mp4' });

editor.getState();  // { playing, time, duration, selection, clipCount, … } — cheap status read

Change it at runtime — the handle mirrors every option, so a DOM host can re-theme or re-localize without remounting (the React <Editor> does this via props):

editor.setTheme(themePresets.paper);   // e.g. a dark/light toggle
editor.setBranding({ productName: 'New Co' });
editor.setI18n({ locale: 'he' });      // also flips text direction
editor.setChrome({ hide: ['save'] });
editor.setCustomCss('.cutforge-root .topbar { height: 60px; }');

Theme presets: midnight, paper, contrast, sunset. Full type definitions ship with the package (CutforgeTheme, CutforgePreset, CutforgeHooks, CutforgeBranding, CutforgeChrome, CutforgeI18n, CutforgeEventMap, …).

Tech stack

| Layer | Choice | | --- | --- | | UI | React 18 + TypeScript + Vite | | State | Zustand | | Compositor | WebGPU (importExternalTexture + WGSL effects) on OffscreenCanvas, with WebGL2 and Canvas2D fallbacks | | Decode | WebCodecs VideoDecoder in a worker; mp4box.js for demux | | Source I/O | Bytes streamed from an OPFS blob on demand — no full-file reads | | Proxies | Sources above 1080p are re-encoded to 540p H.264 on import; preview uses the proxy, export the original | | Thumbnails | Lazily generated WebP cache, kept in OPFS | | Audio | AudioWorklet mixer + SAB ring buffers when COOP/COEP allow, AudioBufferSourceNode otherwise | | Export | WebCodecs VideoEncoder + mp4/webm muxers, with a MediaRecorder fallback | | Storage | OPFS for media/proxies/thumbnails, IndexedDB for metadata | | Core | Rust → wasm32 (SIMD): timeline scheduler, audio resampler, peak summaries, software color path |

Keyboard shortcuts

| Key | Action | | --- | --- | | Space | Play / pause | | ← / → | Step one frame (Shift for a second) | | Home / End | Jump to start / end | | S | Split at the playhead | | ⌫ / Delete | Delete the selection | | ⌘D / Ctrl+D | Duplicate the selection | | + / − | Zoom in / out | | 0 | Reset zoom |

How it's put together

The guiding rule is that the main thread does almost nothing — React and state dispatch, and that's it. Decoding, encoding and disk I/O all live in workers, pixel work is on the GPU, the hot CPU loops (scheduling, audio DSP, peak summaries) are Rust compiled to WASM, and every media byte sits in OPFS. The compositor backend is chosen at runtime; the small indicator in the corner of the preview tells you whether you're on webgpu, webgl2 or canvas2d.

Why each of those calls was made, with the supporting numbers, is written up in ROADMAP.md (the decisions log) and PERFORMANCE.md (measurements and memory accounting).

Known limitations

Codec support is whatever the browser hands you. h264/vp8/vp9/av1/opus/aac are fine in Chromium; anything outside the browser's WebCodecs surface (ProRes, DNxHD, and the like) simply won't import. Safari and Firefox have a partial or missing WebCodecs VideoEncoder, so on those proxy generation turns itself off and the decoder works straight from the full-res source — preview still runs on WebGL2/Canvas2D. GPU device loss is recovered, though you'll see a brief (~1s) blip while the canvas and its worker are rebuilt. Effects today are brightness, contrast, saturation, opacity and fades; exposure, temp/tint, curves and LUTs are next on the list.

License

Cutforge is a commercial product, not open source. The source in this repository is provided for evaluation only; using it in production — including shipping it inside your own application — requires a license. See cutforge.dev.