Skip to content

Govind783/nextjs-video-editor

Folders and files

NameName
Last commit message
Last commit date

Latest commit

c6c0caa Â· Jan 27, 2025

History

18 Commits
Dec 26, 2024
Jan 27, 2025
Dec 26, 2024
Dec 28, 2024
Jan 11, 2025
Dec 28, 2024
Dec 26, 2024
Dec 28, 2024
Jan 3, 2025
Jan 3, 2025
Dec 26, 2024
Dec 28, 2024

Repository files navigation

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

editor-dem-final.mp4

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


Text Customization

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


Video Controls

Adjust speed, volume, and trim points Video adjustment panel


Image Editing

Control size, position, and visual effects Image modification panel


Multi-track Layout

Stack and arrange multiple videos and text overlays Multiple tracks view


Visual Timeline

Precise control with frame markers and playhead Timeline view


Export Options

Convert your composition into a single video file Export screen

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 🌟