https://github.com/govind783/nextjs-video-editor

Next JS and Shad CN based video editor for the web
https://github.com/govind783/nextjs-video-editor

shadcn shadcn-ui video-editing video-editing-software video-editor videoedit videoeditor

Last synced: 2 months ago
JSON representation

Next JS and Shad CN based video editor for the web

• Host: GitHub
• URL: https://github.com/govind783/nextjs-video-editor
• Owner: Govind783
• Created: 2024-12-28T22:00:38.000Z (6 months ago)
• Default Branch: main
• Last Pushed: 2025-02-17T08:22:54.000Z (4 months ago)
• Last Synced: 2025-03-28T09:51:33.437Z (3 months ago)
• Topics: shadcn, shadcn-ui, video-editing, video-editing-software, video-editor, videoedit, videoeditor
• Language: JavaScript
• Homepage: https://nextjs-video-editor.vercel.app
• Size: 394 KB
• Stars: 41
• Watchers: 2
• Forks: 8
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# 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

![Starting screen](https://live.staticflickr.com/65535/54259935250_bb47275d1a_k.jpg)

---

### Text Customization

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

![Text modification panel](https://live.staticflickr.com/65535/54259749534_f40f5693db_k.jpg)

---

### Video Controls  

Adjust speed, volume, and trim points

![Video adjustment panel](https://live.staticflickr.com/65535/54259737473_4a0d7938ca_k.jpg)

---

### Image Editing

Control size, position, and visual effects

![Image modification panel](https://github.com/user-attachments/assets/fa2f94eb-3bbb-49d5-9454-d96c88fd2bd4)

---

### Multi-track Layout

Stack and arrange multiple videos and text overlays

![Multiple tracks view](https://live.staticflickr.com/65535/54259738773_f060c635d0_k.jpg)

---

### Visual Timeline

Precise control with frame markers and playhead

![Timeline view](https://live.staticflickr.com/65535/54259935260_8453ef7063_k.jpg)

---

### Export Options

Convert your composition into a single video file

![Export screen](https://live.staticflickr.com/65535/54259750839_e5515289b9_k.jpg)

## 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](https://github.com/Govind783/video-editor-backend)

DO star the repo 🌟