Video Editor App (CapCut Clone)

A web-based video editing application with timeline editing, effects, transitions, and export capabilities.

Features

  • Video Upload & Preview: Drag and drop video files
  • Timeline Editor: Multi-track timeline with precise editing
  • Cutting & Trimming: Split and trim video clips
  • Effects & Filters: Apply visual effects and color filters
  • Text Overlays: Add animated text with custom fonts
  • Transitions: Smooth transitions between clips
  • Audio Controls: Volume adjustment and audio tracks
  • Export: Render and download edited videos

Project Structure

├── frontend/
│   ├── index.html          # Main application
│   ├── components/
│   │   ├── App.tsx         # Main app component
│   │   ├── VideoPlayer.tsx # Video preview player
│   │   ├── Timeline.tsx    # Timeline editor
│   │   ├── EffectsPanel.tsx # Effects and filters
│   │   └── ExportPanel.tsx # Export controls
│   ├── utils/
│   │   ├── videoProcessor.ts # Video processing utilities
│   │   └── timeline.ts     # Timeline management
│   └── style.css          # Custom styles
├── backend/
│   └── index.ts           # API server (file handling, processing)
└── shared/
    └── types.ts           # Shared TypeScript types

Tech Stack

  • Frontend: React + TypeScript
  • Video Processing: Web APIs (Canvas, WebCodecs)
  • UI Framework: TailwindCSS
  • Backend: Hono (for file uploads and processing)
  • Storage: Val Town Blob storage

Getting Started

The app runs as an HTTP val. Upload videos, edit on the timeline, apply effects, and export your creations!