Video Editor

A sleek, browser-based video editor made in next JS and shad CN. Stack videos, images, and text with precise timing control and real-time preview and export with FFMPEG.

Demo Video

https://github.com/user-attachments/assets/147cec99-d05a-4f89-a89e-02abf7422623

Features

• Drag & drop media handling
• Multi-track video, image, and text composition
• trimming the vieo by grabing it from arrow at right end
• Frame-accurate trimming with visual preview
• Live playback with frame-by-frame preview marker
• Customizable text overlays with full styling control
• Video speed and volume adjustment
• forward rewind by 10 seconds buttons
• resize media by shrinking and incrementing media by selecting them
• Export to single video file

Tech stack

• Next JS
• tailwind
• zustand
• shad CN

UI images Showcase

Timeline and Preview

The main workspace with preview window and multi-track timeline

Text Customization

Fine-tune text appearance with color, background, and positioning, width, height, border-radius, etc

Video Controls

Adjust speed, volume, and trim points

Image Editing

Control size, position, and visual effects

Multi-track Layout

Stack and arrange multiple videos and text overlays

Visual Timeline

Precise control with frame markers and playhead

Export Options

Convert your composition into a single video file

Development and todo

• transitions
• spliting
• dragging media files across the TL canvas

Note: This is a work in progress. Bug reports and feature requests welcome. Backend repo

DO star the repo 🌟