ClipJS

ClipJS is an open-source online video editor built with Next.js, Remotion for real-time previews, and FFmpeg compiled to WebAssembly for high-quality rendering, available at clipjs.mohy.dev.

What is ClipJS?

ClipJS is a web-based video editor that takes media files (videos, audio, images, text) as input and produces edited video files up to 1080p resolution as output. It runs entirely in the browser using WebAssembly, requiring no server-side processing. The project is developed by mohyware and licensed under MIT.

Key Features

• Real-time preview — Previews edits instantly using Remotion, allowing you to see changes as you make them.
• FFmpeg-based rendering — Renders final videos with FFmpeg compiled to WebAssembly, supporting export up to 1080p.
• Interactive timeline editor — Precisely arrange, trim, and control media layers with split and duplicate functionality.
• Multi-track media support — Import and mix videos, audio tracks, images, and text elements seamlessly.
• Element controls — Adjust position, opacity, z-index, and volume per element.
• Keyboard shortcuts — Quickly play, mute, move in time with arrow keys, split, duplicate, and more.
• Docker support — Run the editor locally via Docker with a simple command.

Who is it for?

ClipJS is designed for content creators who need a quick, browser-based video editing solution without installing heavy desktop software. It also suits developers looking to integrate video editing into web applications or contribute to an open-source project. Hobbyists and educators can use it for simple video projects like tutorials or social media clips.

What can you do with ClipJS?

• Content creators: Edit short-form videos for social media by trimming, arranging clips, and adding text overlays, all in the browser.
• Developers: Experiment with WebAssembly-based video processing and integrate the editor into their own Next.js projects.
• Educators: Create instructional videos by combining screen recordings, audio narration, and text annotations.

How does ClipJS work?

ClipJS runs as a Next.js application. To use it locally, clone the repository, install dependencies with npm install, and start the development server with npm run dev. For production, run npm run build then npm start. Alternatively, use Docker: build the image with docker build -t clipjs . and run the container with docker run -p 3000:3000 clipjs. The editor then opens at http://localhost:3000.

FAQ

Is ClipJS free?

Yes, ClipJS is free and open-source under the MIT license. You can download, modify, and use it without charge.

What export resolutions are supported?

ClipJS supports rendering up to 1080p (Full HD) using the FFmpeg WebAssembly port.

Can I run ClipJS without an internet connection?

No, ClipJS requires a browser with WebAssembly support and an internet connection for initial load. Once loaded, some features may work offline, but the application is primarily web-based.

How do I contribute to ClipJS?

The project welcomes contributions. You can find prioritized tasks in TODO.md and submit pull requests on GitHub.