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

a next JS and Shad CN based video editor for the web made with
https://github.com/govind783/nextjs-video-editor

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

Last synced: about 1 month ago
JSON representation

a next JS and Shad CN based video editor for the web made with

• Host: GitHub
• URL: https://github.com/govind783/nextjs-video-editor
• Owner: Govind783
• Created: 2024-12-28T22:00:38.000Z (about 2 months ago)
• Default Branch: main
• Last Pushed: 2025-01-11T11:56:56.000Z (about 1 month ago)
• Last Synced: 2025-01-11T12:33:51.686Z (about 1 month ago)
• Topics: nextjs, shadcn, shadcn-ui, video-editing, video-editing-software, video-editor, videoedit, videoeditor
• Language: JavaScript
• Homepage: https://nextjs-video-editor.vercel.app
• Size: 287 KB
• Stars: 5
• Watchers: 1
• Forks: 0
• 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://live.staticflickr.com/65535/54259749544_29bedf1e09_k.jpg)

---

### 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 🌟