@008byebye/omniclip-pro

Omniclip 2.0 is in development!
We're actively working on the next version of Omniclip to elevate it to the next level.
Want to help shape it? Join the discussion on our Discord.

Open source video editing web application

Introduction

Omniclip is a free and open source video editor that runs entirely in your browser. It requires no accounts, stores everything on your device, and never uploads your files.

Designed for privacy, speed, and flexibility — it gives you full editing control without relying on cloud services or subscriptions. You can use it directly, or embed its components into your own web projects.

Omniclip uses modern browser APIs like WebCodecs to achieve high performance rendering — directly in the browser.
⚠️ Because of this, it may not work properly on older browsers or devices that don’t support these newer technologies.

Features

Omniclip is an actively maintained project with emerging features.

• Trimming
• Splitting
• Supports - Text, Audio, Video (mp4, mov and much more) and Images
• Clip editing on preview - rotating, resizing, text styling and more
• Undo/Redo
• Render in different resolutions, up to 4k.
• Project manager - panel where you can choose from your saved projects, instead just one
• Transitions - Applying transitions between video clips for smooth visual effects
• Effects - filters
• Choose from various timebases ranging from 10-120 fps
• Collaboration (web rtc)

To be added

• Audio Editing - Adjusting volume etc
• Speech to text
• Keyframes

How to

React + Vite（推荐）

1. 安装：

npm i @008byebye/omniclip-pro

2. 在应用启动处显式初始化（幂等、StrictMode/HMR 安全）：

import { useEffect } from 'react'
import { setupContextPure } from '@008byebye/omniclip-pro/pure'

export function OmniProvider({ projectId, children }: { projectId: string, children: React.ReactNode }) {
  useEffect(() => {
    setupContextPure(projectId) // 可多次调用，返回同一上下文实例
  }, [projectId])
  return <>{children}</>
}

3. 在 JSX 中直接使用自定义元素：

return <omni-manager />

• 说明：
  • 纯入口在子路径导出：@008byebye/omniclip-pro/pure
  • 该入口不会在 import 时做顶层副作用（如自动注册/路由挂载），适配 React/Vite 的 StrictMode 与 HMR。

纯 Web（无框架）

1. 安装：

npm i @008byebye/omniclip-pro

2. 手动注册组件后按需使用：

import { getComponents, registerElements } from '@008byebye/omniclip-pro'
registerElements(getComponents()) // 幂等，多次调用安全

3. 在 HTML 中放置所需标签：

<omni-text></omni-text>
<omni-media></omni-media>
<omni-timeline></omni-timeline>

注意事项（迁移与兼容）

• 避免直接导入会触发顶层副作用的入口（例如历史上的 main.js 或浏览器专用入口）。
• React/Vite 场景请使用纯入口 @008byebye/omniclip-pro/pure 暴露的 setupContextPure。
• Web Components 的注册已做幂等处理；重复调用不会抛出 “已经注册” 错误。
• SSR 环境需在运行时判断 window 是否存在后再初始化。

Use omniclip tools:

Soon, Omniclip will be powered by Omni Tools — a programmatic engine for creating timelines from code, automating rendering, and integrating with AI or scripting workflows.

⚠️ Note: Omni Tools is still in early development, but it's shaping up to be a powerful foundation for building videos without a UI.

Contributing

Contributing is vital part of this project, so feel free to help and build this awesome video editor together, simply choose the issue you feel like working on and if you are done make a pull request. to ease communiaction, its best to join my discord server: https://discord.gg/Nr8t9s5wSM

Development:

To start contirbuting you need to do those steps first:

1. Clone the repository: git clone git@github.com:omni-media/omniclip.git or fork it
2. Install the dependencies: npm install
3. Build the project: npm run build
4. Start developing!: npm start

Project architecture

This project leverages the following key components for managing application state:

1. State
2. Actions
3. Controllers
4. Components/Views

The architecture follows a unidirectional data flow model, where data flows in a single direction from actions to state and from state to components.

Tech Stack

• Typescript
• @benev/slate

Contact/Sponsorship

If you are willing to help this project by sponsoring it or have some other questions:

• discord: zenkyu
• gmail: przemekgg2002@gmail.com

License

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