Web Editor Pro is a high-performance, client-side video and web editing platform built for the modern web. It enables professional-grade media manipulation directly in the browser, featuring a multi-track timeline, real-time filters, and sophisticated asset management.
Leveraging FFmpeg.wasm for client-side rendering and Zustand for ultra-fast state management, this project pushes the boundaries of what's possible in a web application. The UI is designed with a premium, dark-themed aesthetic using Tailwind CSS v4 and Shadcn UI, ensuring a seamless and immersive editing experience.
- Multi-Track Timeline: Advanced timeline system with support for video, audio, and overlay tracks.
- Client-Side Rendering: Powered by FFmpeg.wasm to process and export high-quality media without a backend.
- Interactive Playback: Real-time preview with Frame-accurate scrubbing and synchronized audio waveforms.
- High-Fidelity UI: Premium dark-mode interface with micro-interactions powered by Framer Motion.
- Persistent Storage: Robust asset management using IndexedDB (IDB) and LocalStorage for project persistence.
- Advanced FX Engine: Integrated filters and property controls for scale, rotation, and opacity adjustments.
- Framework: Next.js 16.1.6 (App Router)
- Library: React 19.2.3
- Styling: Tailwind CSS v4.0 & Radix UI
- Animations: Framer Motion 12
- Core Engine: FFmpeg.wasm & Wavesurfer.js
- State Management: Zustand (with Persist Middleware)
- Database: IndexedDB (via IDB)
- Components: Customized Shadcn / UI components
-
Clone the repository
git clone https://github.com/mochrks/web-editor-pro.git cd web-editor-pro -
Install dependencies
npm install
-
Run the development server
npm run dev
-
The application will be running on http://localhost:3000.
