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: about 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 (5 months ago)
- Default Branch: main
- Last Pushed: 2025-02-17T08:22:54.000Z (4 months ago)
- Last Synced: 2025-03-28T09:51:33.437Z (2 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
---
### 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](https://github.com/Govind783/video-editor-backend)DO star the repo 🌟