base on Open source video editing web application <p align="center"><img width="300" src="./assets/icon2.png"/></p>
<p align="center"><a href="https://opensource.org/license/mit"><img src="https://img.shields.io/badge/license-MIT-blue.svg"/></a></a></p>
<p align="center">Open source video editing web application</p>
## 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
#### Use omniclip components in your app:
1. Install omniclip:
```sh
npm install omniclip
```
2. Import components and register them to the dom
```js
import {getComponents, registerElements} from 'omniclip'
registerElements(getComponents())
```
3. Simply put the components you would like to use, or all components for whole experience:
```html
<omni-text></omni-text>
<omni-media></omni-media>
<omni-timeline></omni-timeline>
```
#### Use omniclip tools:
Soon, Omniclip will be powered by [**Omni Tools**](https://github.com/omni-media/omnitool) — 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.
<!-- Tools will be added here once available: https://github.com/omni-media/omnitool -->
## 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
[email protected]: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:
[email protected]
## License
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
", Assign "at most 3 tags" to the expected json: {"id":"10151","tags":[]} "only from the tags list I provide: [{"id":77,"name":"3d"},{"id":89,"name":"agent"},{"id":17,"name":"ai"},{"id":54,"name":"algorithm"},{"id":24,"name":"api"},{"id":44,"name":"authentication"},{"id":3,"name":"aws"},{"id":27,"name":"backend"},{"id":60,"name":"benchmark"},{"id":72,"name":"best-practices"},{"id":39,"name":"bitcoin"},{"id":37,"name":"blockchain"},{"id":1,"name":"blog"},{"id":45,"name":"bundler"},{"id":58,"name":"cache"},{"id":21,"name":"chat"},{"id":49,"name":"cicd"},{"id":4,"name":"cli"},{"id":64,"name":"cloud-native"},{"id":48,"name":"cms"},{"id":61,"name":"compiler"},{"id":68,"name":"containerization"},{"id":92,"name":"crm"},{"id":34,"name":"data"},{"id":47,"name":"database"},{"id":8,"name":"declarative-gui "},{"id":9,"name":"deploy-tool"},{"id":53,"name":"desktop-app"},{"id":6,"name":"dev-exp-lib"},{"id":59,"name":"dev-tool"},{"id":13,"name":"ecommerce"},{"id":26,"name":"editor"},{"id":66,"name":"emulator"},{"id":62,"name":"filesystem"},{"id":80,"name":"finance"},{"id":15,"name":"firmware"},{"id":73,"name":"for-fun"},{"id":2,"name":"framework"},{"id":11,"name":"frontend"},{"id":22,"name":"game"},{"id":81,"name":"game-engine "},{"id":23,"name":"graphql"},{"id":84,"name":"gui"},{"id":91,"name":"http"},{"id":5,"name":"http-client"},{"id":51,"name":"iac"},{"id":30,"name":"ide"},{"id":78,"name":"iot"},{"id":40,"name":"json"},{"id":83,"name":"julian"},{"id":38,"name":"k8s"},{"id":31,"name":"language"},{"id":10,"name":"learning-resource"},{"id":33,"name":"lib"},{"id":41,"name":"linter"},{"id":28,"name":"lms"},{"id":16,"name":"logging"},{"id":76,"name":"low-code"},{"id":90,"name":"message-queue"},{"id":42,"name":"mobile-app"},{"id":18,"name":"monitoring"},{"id":36,"name":"networking"},{"id":7,"name":"node-version"},{"id":55,"name":"nosql"},{"id":57,"name":"observability"},{"id":46,"name":"orm"},{"id":52,"name":"os"},{"id":14,"name":"parser"},{"id":74,"name":"react"},{"id":82,"name":"real-time"},{"id":56,"name":"robot"},{"id":65,"name":"runtime"},{"id":32,"name":"sdk"},{"id":71,"name":"search"},{"id":63,"name":"secrets"},{"id":25,"name":"security"},{"id":85,"name":"server"},{"id":86,"name":"serverless"},{"id":70,"name":"storage"},{"id":75,"name":"system-design"},{"id":79,"name":"terminal"},{"id":29,"name":"testing"},{"id":12,"name":"ui"},{"id":50,"name":"ux"},{"id":88,"name":"video"},{"id":20,"name":"web-app"},{"id":35,"name":"web-server"},{"id":43,"name":"webassembly"},{"id":69,"name":"workflow"},{"id":87,"name":"yaml"}]" returns me the "expected json"