OpenReel Video: 1.9K⭐ Open-Source Browser Video Editor — CapCut Alternative

// JavaScript API for programmatic editing
const project = await openreel.createProject({
    width: 1920,
    height: 1080,
    fps: 30,
    duration: 300  // 5 minutes
});

// Add video clip
const clip1 = await project.addClip({
    source: './footage/intro.mp4',
    track: 0,
    startTime: 0,
    duration: 10
});

// Add transition
await clip1.addTransition({
    type: 'fade',
    duration: 1.5,
    easing: 'ease-in-out'
});

// Add text overlay
const text = await project.addText({
    content: 'My Video Title',
    track: 1,
    startTime: 2,
    style: {
        font: 'Montserrat Bold',
        size: 48,
        color: '#ffffff',
        position: { x: 960, y: 540 }
    },
    animation: {
        in: 'slide-up',
        out: 'fade-out',
        duration: 1
    }
});

// Hardware-accelerated preview
const preview = await project.createPreview({
    canvas: document.getElementById('preview-canvas'),
    quality: 'high',  // low | medium | high | full
    proxy: true       // Use proxy files for smooth scrubbing
});

// Scrub through timeline
preview.scrubTo(15.5);  // Jump to 15.5 seconds

// Real-time playback
preview.play();
preview.pause();

// Export with various settings
const exportJob = await project.export({
    format: 'mp4',
    codec: 'h264',  // h264 | hevc | vp9 | av1
    quality: 'high',  // low | medium | high | custom
    
    // Resolution
    width: 1920,
    height: 1080,
    
    // Frame rate
    fps: 30,
    
    // Bitrate
    videoBitrate: 8000,  // kbps
    audioBitrate: 320,   // kbps
    
    // Advanced
    twoPass: true,
    hardwareAccel: 'nvenc'  // nvenc | quicksync | vaapi | none
});

// Progress tracking
exportJob.onProgress((progress) => {
    console.log(`Export: ${progress.percent}%`);
    console.log(`ETA: ${progress.eta} seconds`);
});

// Download when complete
exportJob.onComplete((blob) => {
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = 'my-video.mp4';
    a.click();
});

# Simply visit the demo
open https://openreel.video/demo

# Or embed in your site
<iframe src="https://openreel.video/embed" 
        width="100%" 
        height="600px"
        frameborder="0">
</iframe>

# Clone repository
git clone https://github.com/OpenReelVideo/editor.git
cd editor

# Install dependencies
npm install

# Development server
npm run dev

# Production build
npm run build

# Serve built files
npx serve dist

FROM node:20-alpine

WORKDIR /app
COPY package*.json ./
RUN npm ci --only=production

COPY . .
RUN npm run build

EXPOSE 3000
CMD ["npx", "serve", "dist", "-l", "3000"]

// Quick social media export presets
const presets = {
    youtube: { width: 1920, height: 1080, fps: 30 },
    tiktok: { width: 1080, height: 1920, fps: 30 },
    instagram: { width: 1080, height: 1080, fps: 30 },
    twitter: { width: 1280, height: 720, fps: 30 }
};

// One-click export
await project.export(presets.tiktok);

import { OpenReelEditor } from 'openreel-video';

const editor = new OpenReelEditor({
    container: document.getElementById('editor'),
    theme: 'dark',
    
    // Customize toolbar
    tools: ['cut', 'trim', 'split', 'transition', 'text', 'audio'],
    
    // Event callbacks
    onChange: (project) => {
        console.log('Project updated:', project.duration);
    },
    
    onExport: (blob) => {
        uploadToServer(blob);
    }
});

// Load project
await editor.loadProject('./my-project.json');

// All processing happens locally
const editor = new OpenReelEditor({
    container: document.getElementById('editor'),
    
    // Ensure no network calls
    offlineMode: true,
    
    // Disable telemetry
    telemetry: false,
    
    // No external assets
    localAssetsOnly: true
});

// Low-level WASM API
const wasm = await OpenReelVideo.loadWasm({
    // SIMD acceleration
    simd: true,
    
    // Multi-threading
    threads: navigator.hardwareConcurrency,
    
    // Memory pool
    memory: 2048  // MB
});

// Decode video frame
const frame = await wasm.decodeFrame({
    data: videoChunk,
    format: 'h264',
    timestamp: 15000  // ms
});

// Apply GPU filter
const filtered = await wasm.applyFilter({
    input: frame,
    filter: 'color-grade',
    params: {
        brightness: 1.1,
        contrast: 1.2,
        saturation: 1.05
    }
});