https://github.com/mohyware/clip-js

online video editor built with nextjs, remotion and ffmpeg (web assembly port) for render.
https://github.com/mohyware/clip-js

canvas editor ffmpeg nextjs reactjs remotion remotion-video render video-editing webassembly

Last synced: 17 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/mohyware/clip-js
• Owner: mohyware
• Created: 2025-04-18T16:02:11.000Z (about 1 month ago)
• Default Branch: main
• Last Pushed: 2025-05-06T13:52:57.000Z (19 days ago)
• Last Synced: 2025-05-07T18:13:00.516Z (17 days ago)
• Topics: canvas, editor, ffmpeg, nextjs, reactjs, remotion, remotion-video, render, video-editing, webassembly
• Language: TypeScript
• Homepage: https://clipjs.vercel.app
• Size: 3 MB
• Stars: 10
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
## 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](/images/image.png)

## Installation

Clone the repo, install dependencies, and run the dev server:

```bash

npm install

npm run dev

```

Then navigate to [http://localhost:3000](http://localhost:3000)

## TODOs

Prioritized tasks contributions are welcomed!

- [x] render option with ffmpeg (web assembly port).

- [x] add various font types

- [x] option for marker to be tracked or not.

- [x] add zoom in out for timeline **(ui)**

- [x] duplicate and split for each element on timeline

- [x] bug with duplicated and split elements

- [x] z-index bug with timeline elements

- [x] elements and timeline names bug

- [x] font is bold in render bug

- [x] change error and not found pages style

- [x] add toasts **(ui)**

- [x] Allow changing the playback time not only through the built-in Remotion player but also via the custom timeline.**(ui)**

- [x] add loading to each page 

- [ ] shortcuts

	- [x] space

	- [x] mute

	- [x] split with s

	- [x] duplicate with d

	- [x] delete with del

	- [ ] ctrl + z

- [ ] handle left resize in timeline elements

- [ ] add crop, positioning to elements with react-moveable

- [ ] functionality to separate audio from vids

- [ ] add playback speed for vids and audio

- [ ] add close option to each sidebars **(ui)**

- [ ] responsive for phones **(ui)**

- [ ] Refactor timeline components cause it has a lot of repetitive code.

- [ ] add elements as shapes blur effects.

- [ ] more effects for text

- [ ] PWA Mode: So users can edit offline.

- [ ] insert elements in timeline with https://www.npmjs.com/package/react-moveable (already used in timelines) **(ui)**

- [ ] thumbnail for listed vids and imgs **(ui)**

- [ ] add option to use gpu with WebGL or WebGpu library like https://github.com/diffusionstudio/core

There are also other various TODOS across the project (search with TODO)