Cutmark is a local browser-based video editor for trimming one video, detecting cuts, correcting optional English captions, and downloading an MP4 with a separate subtitle file.
Try it live: cutmark.dev
- Import a local video and preview the source.
- Set one trim range with thin timeline handles or exact timecodes.
- Detect likely scene changes, jump between cuts, and optionally snap trim edges to them.
- Generate English captions, correct their words and source times, and download SRT subtitles.
- Process the selection and download a checked MP4; previous successful exports remain available during edits or failed retries.
- Undo and redo trim, cut-detection and caption edits.
- Autosave drafts and reopen recent projects in the current browser.
- Download the stored source; keep separate backups because browser storage can be cleared.
- Keep earlier projects that use advanced tools unchanged, download a full source-inclusive backup, or start a separate simple copy.
- Keep video processing on the device; the English speech model downloads on first use.
The active editor returns to the original small workflow. Multi-source assembly, reframing, overlays, named clip queues and advanced panels are no longer exposed. Their supporting code and earlier phase tests remain for compatibility and history. See the current workflow.
- Next.js, React, TypeScript, and Tailwind CSS
- WebCodecs for browser video encoding when supported
- FFmpeg WebAssembly as a video processing fallback
- Transformers.js and Whisper Tiny English for speech transcription
- IndexedDB for recent project history
- AWS CDK, Amazon S3, and Amazon CloudFront for hosting
I built Cutmark as a static Next.js app so the editor can run without a video-processing backend. The browser uses WebCodecs when available and falls back to FFmpeg WebAssembly for trimming and encoding. Scene detection and speech transcription are optional steps, so the basic export workflow can stay lightweight.
Unfinished drafts and exports are stored separately in IndexedDB in the browser. Projects keep source media, editable captions, scene cuts, selections, and the last successful output. Projects remain until explicitly deleted; browser storage is not a backup. The source clip stays on the user's device; the English speech model is downloaded from Hugging Face the first time captions are generated. Caption corrections remain in source time across trims and exports. Recognition text is preserved for review rather than automatically deleting repeated words.
For deployment, the site is exported as static files and served from a private S3 bucket through CloudFront. GitHub Actions builds the frontend and deploys it when changes reach main.
Building a video editor in the browser meant working around differences in codec support and available hardware. Using WebCodecs with an FFmpeg fallback gave the app another path when a browser cannot encode a particular video.
I also learned to treat video files as large local data: project history needs browser storage, and editing a saved project requires keeping its source clip as well as its export. Deploying a static Next.js app through S3 and CloudFront gave me a simple way to publish updates through GitHub Actions.
git clone https://github.com/KrishTday/Cutmark.git
cd Cutmark/frontend
npm ci
npm run devOpen http://localhost:3000 in your browser. To check the production build or run lint:
npm run build
npm run lintCaption generation downloads the Whisper Tiny English model on first use. It transcribes English speech; browser codec support and local storage capacity vary by device.
MIT. See LICENSE.
See the Phase 1 safety checklist, Phase 2 visual-editing checklist, Phase 3 caption-delivery checklist, Phase 3 export-settings checklist, the Phase 3 recovery/storage checklist, Phase 4 repurposing checklist, Phase 5 workflow checklist, and complete item-status matrix for implemented, verified and deferred work.
Frontend checks: npm test, npm run lint, and npm run build. Builds and development use Next.js Webpack because the default bundler emitted the processing workers as TypeScript assets rather than executable JavaScript.
The browser suite at frontend/tests/browser.mjs generates local fixtures with FFmpeg and exercises the production export in Edge. It requires Playwright, an installed Edge browser, FFmpeg/ffprobe on PATH, and a local static server. Set CUTMARK_TEST_URL to that server, CUTMARK_PLAYWRIGHT_PATH to an installed Playwright package if it is not available normally, and optionally CUTMARK_ARTIFACTS to a folder for fixtures, outputs, and screenshots; then run node tests/browser.mjs from frontend.
The Phase 2 suite at frontend/tests/phase2.mjs exercises decoded thumbnails/waveforms, native transport, source-based transcript operations and adaptive layout. It uses the Phase 1 fixture directory via CUTMARK_ARTIFACTS. The real-English speech suite also verifies cached recognition and full-source transcription before export.
The scene-tools suite at frontend/tests/scenes.mjs verifies recorded/refined scene analysis, preserved cut corrections, marker notes, interrupted scans and a long source-timed transcript follow/browse workflow. It reuses CUTMARK_ARTIFACTS from the other browser suites.
The caption-delivery suite at frontend/tests/caption-delivery.mjs verifies reviewed SRT/VTT import, persistent styles, actual burned-in MP4 captions, native/compatible paths, portrait wrapping and recovery after cancellation/font/overflow failures. It reuses CUTMARK_ARTIFACTS and requires FFmpeg/ffprobe. Export presets and actual resolution/quality/audio controls are now implemented; portable project backups/relinking, project titles/duplication and targeted cache management are now implemented in Phase 3C.
The export-settings suite at frontend/tests/export-settings.mjs measures native/compatible quality and file-size changes, output dimensions/audio, target-sized caption parity, preset undo/reopening and persisted measured output metadata. It uses the same test environment and writes artifacts under export-settings.
The project-backups and storage-tools suites verify fresh-profile portable recovery, exact-media relinking, shared-media duplication/deletion, version-2 migration, quota rollback, protected downloads and scoped model-cache cleanup. See docs/phase-3-recovery.md for the portable format and completed Phase 3 scope. The Phase 4/5 flows are now implemented; the item-status matrix separates completed core flows from conditional extensions and manual verification gaps.
The new suites are frontend/tests/sequences.mjs, assembly.mjs, framing.mjs, finishing.mjs, images.mjs and join-precision.mjs. They verify actual joins, continuous audio, framing/layer pixels, per-job recovery, multi-asset backups and 100 off-grid VFR ranges without accumulated drift. Build once before starting browser tests; replacing frontend/out while pages load hashed chunks invalidates a run. Exact composed/joined exports require a supported browser video encoder; compatible preparation adapts source codecs locally. See the current checklists for limits rather than assuming all 100 conditional backlog ideas or all browsers are supported.
The homepage redesign adds first/returning-user layouts, truthful revision status, metadata-only project search, accessible import/recovery and a lightweight workflow illustration. The current test inventory is 53 unit tests and fifteen browser suites, including frontend/tests/homepage.mjs.
The simplified editing workspace groups advanced tools, prioritizes caption wording, and keeps export in the project header. The test inventory is now 53 unit tests and sixteen browser suites, including frontend/tests/workspace.mjs.