react-video-cutter

React Video Cutter is a React component that lets you mark segments of an MP4 video for cutting, directly inside a web page. It gives your app a visual timeline where a user can click or drag to set a start and end marker, then fine-tune those markers by dragging their handles. The component itself does not perform the actual video cutting: it produces a JSON file describing the chosen segments, which a separate backend process is expected to use to do the real trimming.

The component supports keyboard shortcuts for setting markers and switching between keeping or deleting the selected interval, along with full undo and redo history. It includes built-in dark and light theme support, and ships with translations for English, Turkish, Arabic, and Russian, including right-to-left layout for Arabic. During playback, any interval marked for cutting is automatically skipped, so you can preview roughly how the final trimmed video will play before anything is actually cut.

Developers control the component through props such as the video source URL, a callback that fires whenever the cuts change, an optional snap interval so markers lock to fixed time steps, and toggles for showing export and undo and redo buttons. It also exposes a ref-based API for reading and setting cuts programmatically, including adding, removing, and clearing cut intervals from outside the component.

Installing the package requires React 19 or newer and Tailwind CSS version 4 as peer dependencies, plus the Tailwind Vite plugin configured in the project. A live demo is available that loads a sample video so you can try marking cuts without installing anything first. The project includes a test suite built with Vitest and Testing Library, and is distributed under the MIT license.