Clypra

A modern, open-source video editor built with Tauri, React, and TypeScript featuring a professional timeline interface.

Features • Installation • Usage • Contributing • License

Features

• 🎬 Multi-Format Support - Import MP4, MOV, WebM, MKV, M4V, AVI videos, MP3, WAV, AAC audio, and JPG, PNG, WebP images
• ✂️ Precision Editing - Frame-accurate trimming with visual timeline
• 📊 Audio Visualization - Real-time audio waveform display
• 🎞️ Filmstrip Preview - Thumbnail strip for easy navigation
• 🎯 Professional Timeline - Multi-track timeline with ruler and playhead
• 📝 Text Overlays - Add titles and captions with custom fonts
• 💾 Project Management - Save and load projects with auto-save
• ↩️ Undo/Redo - 100 levels of undo/redo history
• ⚡ Fast Processing - FFmpeg-powered video processing
• 🖥️ Native Performance - Built with Tauri for desktop-class performance
• 🎨 Modern UI - Clean, intuitive interface with dark mode
• 🔄 Cross-Platform - Works on macOS, Windows, and Linux

Download

Current Status: v0.1.0 in development. See milestone →

Project Structure

src/
├── components/          # React components
│   ├── editor/         # Core editor components (Timeline, Preview, etc.)
│   ├── screens/        # Full-screen views (LaunchScreen)
│   └── ui/             # Generic UI components (Modals, Icons, etc.)
├── store/               # Zustand global state stores
│   ├── timelineStore.ts# Timeline structure (tracks, clips)
│   ├── playbackStore.ts# Playback sync and playhead state
│   ├── projectStore.ts # Media assets and project settings
│   └── ...             # uiStore, settingsStore, dragStateStore
├── lib/                 # Shared utilities and FFmpeg logic
├── hooks/               # Custom React hooks
├── types/               # TypeScript type definitions
├── constants/           # Global configuration
└── App.tsx              # Main application entry

See ARCHITECTURE.md for detailed documentation.

Getting Started

Prerequisites

• Node.js 18+ and npm
• Rust and Cargo (latest stable)
• macOS desktop builds: FFmpeg and FFprobe are bundled as Tauri sidecars (src-tauri/bin/). The checked-in files are small wrappers that call ffmpeg / ffprobe from your PATH so local cargo tauri dev works without copying static binaries. For release DMGs, replace them with static builds per src-tauri/bin/README.md (GPL/LGPL compliance, code-signing / notarization for sidecars). Until Linux/Windows sidecars exist, install FFmpeg on those platforms as before.

Install FFmpeg (dev / non-macOS)

# macOS (used by sidecar wrappers until you drop in static binaries)
brew install ffmpeg

# Ubuntu/Debian
sudo apt install ffmpeg

# Windows (using Chocolatey)
choco install ffmpeg

# Or download from https://ffmpeg.org/download.html

Installation

# Clone the repository
git clone https://github.com/AIEraDev/clypra.git
cd clypra

# Install dependencies
npm install

# Run in development mode
npm run tauri dev

Building from Source

# Build the frontend
npm run build

# Build the Tauri app
npm run tauri build

# The built app will be in src-tauri/target/release/

Development

Available Scripts

• npm run dev - Start Vite dev server
• npm run build - Build frontend
• npm run preview - Preview production build
• npm run tauri dev - Run Tauri app in development
• npm run tauri build - Build Tauri app for production

Tech Stack

Frontend:

• React 19
• TypeScript
• Tailwind CSS 4
• Vite 7

Backend:

• Tauri 2
• Rust
• FFmpeg (via CLI)

Usage

1. Import Media - Click "Import Media" to select video, audio, or image files
2. Preview - Use the video player controls to preview your content
3. Edit Timeline - Drag media to the timeline and arrange clips
4. Trim & Adjust - Adjust clip start/end times using the timeline
5. Export - Click "Export" to save your edited video

Keyboard Shortcuts

• Space - Play/Pause video
• Ctrl/Cmd + Scroll - Zoom timeline
• Trackpad Pinch - Zoom timeline

Screenshots

Coming soon - Add screenshots of your app in action

Architecture Highlights

Global State Management (Zustand)

Clypra relies on a powerful and scalable state architecture using Zustand. State is split into logical domains to minimize unnecessary re-renders while ensuring high performance:

• timelineStore: Manages complex timeline manipulations (clips, tracks).
• playbackStore: Highly optimized store for frame-accurate playback and playhead sync.
• projectStore: Manages media assets, project settings, and history.
• uiStore & settingsStore: Handles application themes, view modes, and preferences.

Clean Separation of Concerns

• Components (src/components) - Focused purely on declarative UI rendering. Core editor modules (Timeline, SourcePreview, PreviewPanel) are fully decoupled.
• State (src/store) - Centralized business logic and actions.
• Utilities (src/lib) - Pure functions for timeline math, FFmpeg process execution, and Tauri sidecar integration.
• Type Safety (src/types) - Strict TypeScript models for the entire editing domain.

Performance Optimizations

• Memoized calculations for timeline rendering
• Canvas-based waveform for efficient visualization
• Async filmstrip generation to avoid blocking UI
• Proper cleanup to prevent memory leaks

Contributing

We welcome contributions from the community! Whether it's:

• 🐛 Bug reports
• 💡 Feature requests
• 📝 Documentation improvements
• 🔧 Code contributions

Please read our Contributing Guide and Code of Conduct before submitting a PR.

Development

# Run tests
npm test

# Run tests with UI
npm run test:ui

# Lint code
npm run lint

Roadmap

• [ ] Multi-track audio mixing
• [ ] Video effects and filters
• [ ] Transitions between clips
• [ ] Text and title overlays
• [ ] Export presets for different platforms
• [ ] Keyboard shortcut customization
• [ ] Plugin system

Community

• Discord: Join our Discord (coming soon)
• Issues: GitHub Issues
• Discussions: GitHub Discussions
• Pull Requests: Contributing Guide
• Sponsor: GitHub Sponsors (coming soon)

License

This project is licensed under the MIT License - see the LICENSE file for details.

Acknowledgments

• Built with Tauri - Rust-powered desktop apps
• Video processing by FFmpeg
• UI powered by React and Tailwind CSS
• Timeline design inspired by professional video editors

Support

If you find this project useful, please consider:

• ⭐ Starring the repository
• 🐛 Reporting bugs
• 💡 Suggesting new features
• 🔧 Contributing code
• 📢 Sharing with others

Made with ❤️ by the Clypra community