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

• 🎞️ 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 .

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

npm install

npm run dev

Then navigate to http://localhost:3000

Prioritized tasks contributions are welcomed!

• render option with ffmpeg (web assembly port).
• add various font types
• option for marker to be tracked or not.
• add zoom in out for timeline (ui)
• duplicate and split for each element on timeline
• bug with duplicated and split elements
• z-index bug with timeline elements
• elements and timeline names bug
• font is bold in render bug
• change error and not found pages style
• add toasts (ui)
• Allow changing the playback time not only through the built-in Remotion player but also via the custom timeline.(ui)
• add loading to each page
• shortcuts
  • space
  • mute
  • split with s
  • duplicate with d
  • 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)