/clip-js

online video editor built with nextjs, remotion and ffmpeg (web assembly port) for render.

Primary LanguageTypeScriptMIT LicenseMIT

Overview

This is an online video editor built with nextjs, remotion for real-time preview and ffmpeg (web assembly port) for high-quality render.

Features

  • 🎞️ Real-time Preview: See immediate previews of edits.
  • 🧰 Render with ffmpeg (web assembly port) with various options supports up to 1080p export.
  • 🕹️ Interactive Timeline Editor: Precisely arrange, trim, and control media through a custom-built timeline.
  • ✂️ Element Utilities: Easily split, duplicate, and manage individual media layers.
  • 🖼️ Flexible Media Support: Import and mix videos, audio tracks, images, and text elements seamlessly.
  • 🛠️ Advanced Element Controls: Adjust properties like position, opacity, z-index and volume per element.
  • ⌨️ Keyboard Shortcuts: Quickly play, mute, move in time with arrows, split, duplicate, etc .

Alt Text

Installation

Clone the repo, install dependencies:

npm install

Then run the development server:

npm run dev

Or build and start in production mode:

npm run build
npm start

Alternatively, use Docker:

# Build the Docker image
docker build -t clipjs .

# Run the container
docker run -p 3000:3000 clipjs

Then navigate to http://localhost:3000

TODOs

Prioritized tasks are listed in TODO.md.

contributions are welcomed!