Skip to content

AIEraDev/Clypra

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

432 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Clypra

Clypra Showcase Banner

Clypra Logo

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

License: MIT PRs Welcome GitHub issues GitHub stars

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 & Installation

macOS (Apple Silicon & Intel)

The recommended way to install Clypra on macOS is via Homebrew Cask to automatically bypass the Gatekeeper security warnings:

# Add the custom tap and install the cask
brew install AIEraDev/tap/clypra

Alternatively, download the direct installer from the Latest Releases:

  • macOS Universal DMG (If using the DMG, drag Clypra to your /Applications folder, then Right-click/Control-click the icon and select Open to authorize execution).

Windows

  • Windows x64 MSI Installer: Download from the Latest Releases (If SmartScreen blocks execution, click More Info and select Run Anyway).

Linux

  • Linux x64 AppImage: Download from the Latest Releases _(Make the file executable using chmod +x Clypra_.AppImage, then run).*

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

# Configure API key (required for text effects and templates)
cp .env.example .env
# Edit .env and add your Clypra API key

# Run in development mode
npm run tauri dev

API Configuration

Clypra uses the Clypra API for text effects and templates. To enable these features:

  1. Copy the .env.example file to .env:

    cp .env.example .env
  2. Add your API key to the .env file:

    VITE_CLYPRA_API_KEY=your_api_key_here
    
  3. Important: Never commit the .env file to version control. It's already included in .gitignore.

The API key is used to authenticate requests to:

  • Text effects library
  • Text templates library
  • Lottie animations

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

Clypra Video Editor Interface

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

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

About

A modern video editor built with Tauri, React, and TypeScript. Focus on building free capabilities of premium capcut functionalities

Topics

Resources

License

Code of conduct

Contributing

Stars

Watchers

Forks

Packages

 
 
 

Contributors