explaingit

cenap/react-video-cutter

Analysis updated 2026-05-18

2TypeScriptAudience · developerComplexity · 2/5LicenseSetup · moderate

TLDR

React Video Cutter is a React UI component for marking start and end points to cut from an MP4 video, exporting the chosen segments as JSON for a backend to actually trim.

Mindmap

mindmap
  root((react-video-cutter))
    What it does
      Mark video segments
      Export cuts as JSON
      Drag timeline markers
      Auto-skip on playback
    Tech stack
      React
      TypeScript
      Tailwind CSS
      Vite
    Features
      Undo and redo
      Dark mode
      Multi-language RTL
      Keyboard shortcuts
    Use cases
      Video editing UI
      Backend cutting pipeline
      Localized apps

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

What do people build with it?

USE CASE 1

Let users visually mark segments of an uploaded video to remove before sending it to a backend for trimming.

USE CASE 2

Build a video editing UI with draggable timeline markers, undo/redo, and keyboard shortcuts.

USE CASE 3

Add a localized, dark-mode-ready video cutting tool to a multi-language web app.

USE CASE 4

Preview how a video will play with marked segments auto-skipped, before final cutting happens.

What is it built with?

ReactTypeScriptTailwind CSSViteVitest

How does it compare?

cenap/react-video-cutter4ssh1/mine-sweeperachawla19/intuitcode-extension
Stars222
LanguageTypeScriptTypeScriptTypeScript
Last pushed2026-01-31
MaintenanceMaintained
Setup difficultymoderatemoderatemoderate
Complexity2/52/54/5
Audiencedevelopervibe coderdeveloper

Figures from each repo's GitHub metadata at analysis time.

How do you get it running?

Difficulty · moderate Time to first run · 30min

Requires React 19+ and Tailwind CSS v4+ as peer dependencies, plus the Tailwind Vite plugin configured.

MIT license: use freely for any purpose, including commercial use, as long as you keep the copyright notice.

In plain English

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.

Copy-paste prompts

Prompt 1
Show me how to install react-video-cutter in a React 19 project with Tailwind CSS v4 configured.
Prompt 2
Write a React component that uses VideoCutter and sends the resulting cut intervals to a backend API.
Prompt 3
How do I use the VideoCutterHandle ref API to programmatically add and remove cuts?
Prompt 4
Add Turkish and Arabic locale support to a video cutting page using react-video-cutter.
Prompt 5
Explain the keyboard shortcuts available in react-video-cutter for setting and clearing markers.

Frequently asked questions

What is react-video-cutter?

React Video Cutter is a React UI component for marking start and end points to cut from an MP4 video, exporting the chosen segments as JSON for a backend to actually trim.

What language is react-video-cutter written in?

Mainly TypeScript. The stack also includes React, TypeScript, Tailwind CSS.

What license does react-video-cutter use?

MIT license: use freely for any purpose, including commercial use, as long as you keep the copyright notice.

How hard is react-video-cutter to set up?

Setup difficulty is rated moderate, with roughly 30min to a first successful run.

Who is react-video-cutter for?

Mainly developer.

Open on GitHub → Explain another repo

This repo across BitVibe Labs

Verify against the repo before relying on details.