Skip to content

walterlow/freecut

Repository files navigation

FreeCut

freecut.net

Edit videos. In your browser.

License: MIT

FreeCut Timeline Editor

FreeCut is a browser-based multi-track video editor. No installation, no uploads — everything runs locally in your browser using WebGPU, WebCodecs, OPFS, and the File System Access API.

Features

Timeline & Editing

  • Multi-track timeline with video, audio, text, image, and shape tracks
  • Track groups with mute/visible/locked propagation
  • Trim, split, join, ripple delete, and rate stretch tools
  • Rolling edit, ripple edit, slip, and slide tools
  • Per-track "Close Gaps" to remove empty space between clips
  • Filmstrip thumbnails and audio waveform visualization
  • Pre-compositions (nested compositions, 1 level deep)
  • Markers for organizing your edit
  • Source monitor with mark in/out via playhead or skimmer and insert/overwrite edits
  • Undo/redo with configurable history depth

GPU Effects

All visual effects are WebGPU-accelerated.

  • Blur — gaussian, box, motion, radial, zoom
  • Color — brightness, contrast, exposure, hue shift, saturation, vibrance, temperature/tint, levels, curves, color wheels, grayscale, sepia, invert
  • Distortion — pixelate, RGB split, twirl, wave, bulge/pinch, kaleidoscope, mirror, fluted glass
  • Stylize — vignette, film grain, sharpen, posterize, glow, edge detect, scanlines, color glitch
  • Keying — chroma key (green/blue screen) with tolerance, softness, and spill suppression

Blend Modes

25 GPU-accelerated blend modes: normal, darken, multiply, color burn, linear burn, lighten, screen, color dodge, linear dodge, overlay, soft light, hard light, vivid light, linear light, pin light, hard mix, difference, exclusion, subtract, divide, hue, saturation, color, luminosity.

Masks

Layer masks with keyframeable geometry transforms for compositing and selective effect application.

Transitions

  • CPU transitions — fade, wipe, slide, 3D flip, clock wipe, iris — each with directional variants
  • GPU transitions — dissolve, sparkles, glitch, light leak, pixelate, chromatic aberration, radial blur
  • Adjustable duration and alignment

Keyframe Animation

  • Bezier curve editor with preset easing functions
  • Easing: linear, ease-in, ease-out, ease-in-out, cubic-bezier, spring
  • Auto-keyframe mode with dopesheet toggle
  • Graph editor, dopesheet, and split view

Preview & Playback

  • Real-time WebGPU-composited preview with transform gizmo (drag, resize, rotate)
  • Frame-accurate playback via custom Clock engine
  • GPU scopes — waveform, vectorscope, histogram
  • Snap guides and timecode display

Export

  • In-browser rendering via WebCodecs (no server required)
  • Video containers: MP4, WebM, MOV, MKV
  • Video codecs: H.264, H.265, VP8, VP9, AV1
  • Audio codecs: AAC, Opus, MP3, FLAC, PCM (WAV)
  • Quality presets: low (2 Mbps), medium (5 Mbps), high (10 Mbps), ultra (20 Mbps)

Media

  • Import via File System Access API — files are referenced, never copied
  • Video: MP4, WebM, MOV, MKV
  • Audio: MP3, WAV, AAC, OGG, Opus
  • Image: JPG, PNG, GIF (animated), WebP
  • Up to 5 GB per file
  • OPFS proxy video generation for smooth preview
  • Media relinking for moved or deleted files
  • Scene detection and optical flow analysis

Transcription

  • Browser-based speech-to-text via Whisper (runs locally in a Web Worker)
  • Models: tiny, base, small, medium, large
  • Auto-generate caption text items from transcripts
  • Multi-language support

Other

  • Native SVG shapes — rectangle, circle, triangle, ellipse, star, polygon, heart
  • Text overlays with custom fonts, colors, and positioning
  • Project bundles — export/import projects as ZIP files with Zod-validated schemas
  • IndexedDB persistence with content-addressable storage
  • Auto-save
  • Customizable keyboard shortcuts with preset import/export
  • Configurable settings (FPS, snap, waveforms, filmstrips, preview quality, export defaults, undo depth, auto-save interval)

Quick Start

Prerequisites: Node.js 18+

git clone https://github.com/walterlow/freecut.git
cd freecut
npm install
npm run dev

Open http://localhost:5173 in Chrome.

Workflow

  1. Create a project from the projects page
  2. Import media by dragging files into the media library
  3. Drag clips to the timeline — trim, arrange, add effects and transitions
  4. Animate with the keyframe editor
  5. Preview your edit in real time
  6. Export directly from the browser

Browser Support

Chrome 113+ required. FreeCut uses WebGPU, WebCodecs, OPFS, and the File System Access API which are not yet available in all browsers.

Brave

Brave disables the File System Access API by default. To enable it:

  1. Navigate to brave://flags/#file-system-access-api
  2. Change the setting from Disabled to Enabled
  3. Click Relaunch to restart the browser

Keyboard Shortcuts

Action Shortcut
Play / Pause Space
Previous / Next frame Left / Right
Previous / Next snap point Up / Down
Go to start / end Home / End
Split at playhead Ctrl+K
Split at cursor Shift+C
Join clips Shift+J
Delete selected Delete
Ripple delete Ctrl+Delete
Freeze frame Shift+F
Nudge item (1px / 10px) Shift+Arrow / Ctrl+Shift+Arrow
Undo / Redo Ctrl+Z / Ctrl+Shift+Z
Copy / Cut / Paste Ctrl+C / Ctrl+X / Ctrl+V
Selection tool V
Razor tool C
Rate stretch tool R
Rolling edit tool N
Ripple edit tool B
Slip tool Y
Slide tool U
Toggle snap S
Add / Remove marker M / Shift+M
Previous / Next marker [ / ]
Add keyframe A
Clear keyframes Shift+A
Toggle keyframe editor Ctrl+Shift+A
Keyframe view: graph / dopesheet / split 1 / 2 / 3
Group / Ungroup tracks Ctrl+G / Ctrl+Shift+G
Mark In / Out I / O
Clear In/Out Alt+X
Insert / Overwrite edit , / .
Zoom in / out Ctrl+= / Ctrl+-
Zoom to fit \
Zoom to 100% Shift+\
Save Ctrl+S
Export Ctrl+Shift+E

Tech Stack

Development

npm run dev            # Dev server on port 5173
npm run build          # Production build
npm run lint           # ESLint
npm run check:boundaries # Feature boundary architecture check
npm run check:deps-contracts # Enforce deps contract seam routing
npm run check:legacy-lib-imports # Block any "@/lib/*" usage
npm run check:deps-wrapper-health # Fail on unused pass-through deps wrappers
npm run check:edge-budgets # Feature seam coupling budget check
npm run report:feature-edges # Feature dependency edge report
npm run report:feature-edges:json # JSON feature edge report
npm run report:deps-wrapper-health:json # JSON deps wrapper health report
npm run verify         # Boundaries + deps contracts + no-lib guard + wrapper health + edge budgets + lint + build
npm run test           # Vitest (watch mode)
npm run test:run       # Vitest (single run)
npm run test:coverage  # Vitest with coverage
npm run routes         # Regenerate TanStack Router route tree

Environment

VITE_SHOW_DEBUG_PANEL=true   # Show debug panel in dev (default: true)

Project Structure

src/
|- app/                     # App bootstrap and providers
|- domain/                  # Framework-agnostic domain logic
|  |- animation/             # Easing functions and interpolation
|  |- projects/              # Project domain types
|  \- timeline/              # Transitions (engine, registry, renderers)
|- infrastructure/          # Browser/storage/GPU adapters
|- lib/
|  |- gpu-effects/           # WebGPU effect pipeline + shader definitions
|  |- gpu-transitions/       # WebGPU transition pipeline + shaders
|  |- gpu-compositor/        # WebGPU blend mode compositor
|  |- gpu-scopes/            # WebGPU waveform/vectorscope/histogram
|  |- masks/                 # Mask texture management
|  |- analysis/              # Optical flow and scene detection
|  |- thumbnails/            # GPU-accelerated thumbnail renderer
|  |- fonts/                 # Font loading
|  |- shapes/                # Shape path generators
|  \- migrations/            # Data migration system
|- features/
|  |- editor/                # Editor shell, toolbar, panels, stores
|  |- timeline/              # Multi-track timeline, actions, services
|  |- preview/               # Preview canvas, transform gizmo, GPU scopes
|  |- player/                # Playback engine (Clock, composition)
|  |- composition-runtime/   # Composition rendering (sequences/items/audio/transitions)
|  |- export/                # WebCodecs export pipeline (Web Worker)
|  |- effects/               # GPU effect system and UI panels
|  |- keyframes/             # Keyframe animation, Bezier editor, easing
|  |- media-library/         # Media import, metadata, OPFS proxies, transcription
|  |- project-bundle/        # Project ZIP export/import
|  |- projects/              # Project management
|  \- settings/              # App settings, keyboard shortcut editor
|- shared/                  # Shared UI/state/utilities across layers
|- components/ui/            # shadcn/ui components
|- config/hotkeys.ts         # Keyboard shortcut definitions
|- routes/                   # TanStack Router (file-based)
\- types/                    # Shared TypeScript types

Architecture boundary policy and migration plan: docs/architecture-boundaries.md

Contributing

FreeCut is open source but not open contribution — pull requests are not accepted at this time.

  • Report bugs — open an issue
  • Suggest features — start a discussion

License

MIT

About

FreeCut is a professional-grade video editor that runs entirely in your browser. Professional video editing, zero installation. Create stunning videos with multi-track editing, keyframe animations, real-time preview, and high-quality exports.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Sponsor this project

 

Packages

 
 
 

Contributors

Languages