Linear Edit

Trim and stitch video clips entirely on your own device. Upload local video files, mark in/out points, build a timeline, preview the assembled sequence, and export a final MP4 — all processed in-browser via ffmpeg.wasm. No backend, no uploads: your files never leave your computer.

Two layouts are available from the toggle in the header:

• Modern — a clean Tailwind UI: upload, source monitor, timeline, sequence preview, export.
• Classic — a tape-deck-style dual-monitor console (PLAYER / RECORDER) in the spirit of the original app's UI.

Getting started

npm install
npm run dev

How it works

• Source files are read locally via the browser's File API and never uploaded anywhere.
• The timeline preview swaps a single <video> element's source between clips as playback crosses each clip's out-point, so the assembled sequence can be previewed instantly without waiting on an export.
• There's a separate audio track under the video track. Its clips play back to back from 0:00, whatever the video cuts are. They can come from audio files or from the marked range of a video's own sound ("Add to Audio Track" / ADD AUDIO). The track is mixed with the video clips' own sound, or replaces it when "Keep video clips' own sound" is off. The video track sets the length of the export: a shorter audio track runs into silence and a longer one gets cut off. In preview, a hidden <audio> element follows the video sequence player's clock (src/hooks/useAudioTrack.js).
• Audio can be uploaded the same way as video (drop zone / browse in Modern, LOAD in Classic): MP3, WAV, M4A/AAC, FLAC, OGG/Opus and more, recognized by extension when the browser gives no MIME type. Formats the browser can't play itself (AIFF, WMA, AMR in Chrome, …) are converted through ffmpeg.wasm for preview only; export still reads the original.
• The audio track also works by itself: with no video clips, preview runs on the audio track's own clock (src/hooks/useAudioSequencePlayer.js) and export produces an M4A file instead of an MP4.
• Heavy video work runs on the browser's own media stack via WebCodecs where it can (src/lib/webcodecsTranscode.js): hardware decode/encode on the GPU when the platform offers it, native software codecs otherwise. That covers the Classic deck's all-intra scrub proxy (H.264, or VP9 when the browser has no H.264 encoder) and export's video track (H.264 only). Audio, mixing and the final mux stay on ffmpeg.wasm, which is also the full fallback whenever WebCodecs can't handle a source - no H.264 encoder, or a container other than MP4/MOV/WebM/MKV. The UI says which engine did the work, and why when it wasn't WebCodecs.
• Export writes each clip into ffmpeg.wasm's in-memory virtual filesystem, trims and concatenates them there, and hands back a downloadable blob — nothing is persisted to disk until you click Download.

See TECHDEBT.md for known tech debt and DEPLOYMENT.md for hosting notes.

Tests

npm test

Runs under plain Node with no browser, via node --test. Coverage is currently the demux half of src/lib/videoFrameCache.js — which is pure JS, unlike the decode half that needs WebCodecs — checked against a committed Big Buck Bunny clip whose properties are read from ffprobe rather than from this code. See test/fixtures/README.md for what that clip deliberately contains and why a generated fixture can't replace it.

Attribution

This is a from-scratch rewrite of my earlier linearEditFrontend / linearEditBackend project, which paired a React/Redux frontend with a Rails API that shelled out to youtube-dl and ffmpeg server-side to assemble clips. This version keeps the original's dual-monitor editing concept (and revives it directly in the Classic layout) but moves all processing client-side with ffmpeg.wasm, so it needs no server at all.

The test fixture in test/fixtures/ is a clip of Big Buck Bunny, © 2008 Blender Foundation (bigbuckbunny.org), used under the Creative Commons Attribution 3.0 license and re-encoded for this repository.