A powerful web video editing UI framework, empowering web applications to quickly integrate professional-grade video editing capabilities.
- Project Introduction
- Design Philosophy
- Core Features
- Quick Examples
- Installation
- Documentation
- License
- Acknowledgements
WebCut is a video editing UI framework specifically designed for web applications. It provides intuitive canvas interface and comprehensive timeline tools, enabling developers to easily perform video editing, text/graphic overlay, element layout and transformation operations in the browser, and integrate them into their applications in a modular way.
🚀 Quick Integration · 🎨 Rich Features · 📱 Responsive Design · ⚡ High Performance Experience
WebCut's core philosophy is "Complex Capabilities, Simple Usage". We believe that implementing professional-grade video editing on the web platform should not be a burden. Through componentized architecture and responsive APIs, developers can focus on creativity itself, rather than underlying details.
| Principle | Description |
|---|---|
| 🎯 User-First Design | Intuitive interfaces and clear documentation, reducing learning costs |
| ⚡ Performance Optimization | Optimized for browser environments to ensure smooth operation |
| 🔧 Extensibility | Modular design for easy customization and feature extension |
| 🛡️ Type Safety | Comprehensive TypeScript support to reduce development errors |
| Feature | Description |
|---|---|
| 🎨 Canvas Editing | Intuitive canvas-based editing interface, what you see is what you get |
| 🎬 Player Control | Play/pause, progress and volume control, supporting frame-level precise operations |
| 📝 Text Overlay | Multi-style text addition and customization, supporting rich text effects |
| ⏱️ Timeline | Precise timeline control, supporting scaling, positioning and clip management |
| 🎛️ Element Transformation | Intuitive scaling, rotation and position adjustment, supporting precise value input |
| Feature | Description |
|---|---|
| 📏 Size Measurement | Accurate text, video and image size calculation and control |
| 🧰 Utility Functions | Export Blob, text-to-image conversion and other practical features |
| 📱 Responsive Design | Adapt to different screen sizes, providing consistent editing experience |
Project screenshots or demo videos can be placed here
The following example shows how to quickly integrate WebCut in a Vue project:
<script setup lang="ts">
// Import core components and styles
import { WebCutEditor } from 'webcut';
import 'webcut/esm/style.css';
// Project ID (example)
const yourProjectId = 'example-project';
</script>
<template>
<div class="editor-container">
<h1>Video Editor</h1>
<!-- Use the complete editor component directly -->
<WebCutEditor :project-id="yourProjectId" />
</div>
</template>
<style scoped>
.editor-container {
width: 100%;
height: 100vh;
display: flex;
flex-direction: column;
}
</style>Tip: The above code will render a complete video editing interface, including video canvas, toolbar and timeline. You can also import components and tools from
webcutas needed for customization.
WebCut supports installation via multiple package managers:
# Using npm
npm install webcut
# Using yarn
yarn add webcut
# Using pnpm
pnpm add webcutNote: WebCut currently supports modern browser environments. Before use, please ensure that your project has configured the necessary polyfills (if supporting older browsers is required).
WebCut provides detailed documentation to help you get started quickly:
- API Documentation: Located in
docs/api.mdanddocs/zh-cn/api.md - Component Documentation: Detailed component usage instructions
- Quick Start Guide: Helping new users get started quickly
- FAQ: Solutions and best practices
For online documentation, please visit our documentation site.
This project is licensed under the MIT License, allowing free use, modification, and distribution. See the file for details.
WebCut's development would not be possible without the support of the following excellent open-source projects:
- @webav/av-canvas - Provides underlying video rendering capabilities
- @webav/av-cliper - Supports video editing functionality
- Vue 3 - Responsive frontend framework
- TypeScript - Type system support
- naive-ui - UI component library
- @vicons - Icon library
Thank you to the contributors of these projects for their efforts to the open-source community!
Tip: If you like this project, please give us a ⭐️ support!