@bylqwjc/react-video-editor 1.0.3 → 1.0.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/README.md +6 -73
  2. package/package.json +17 -128
  3. package/{dist/react.mjs → react.mjs} +106 -106
  4. package/styles.css +2 -0
  5. package/dist/styles.css +0 -2
  6. package/dist/web-component.d.ts +0 -35
  7. package/dist/web-component.mjs +0 -1496
  8. /package/{dist/react.d.ts → react.d.ts} +0 -0
package/README.md CHANGED
@@ -1,85 +1,18 @@
1
- <p align="center">
2
- <a href="https://github.com/designcombo/react-video-editor">
3
- <img width="150px" height="150px" src="https://cdn.designcombo.dev/combo-logo-black.png"/>
4
- </a>
5
- </p>
6
- <h1 align="center">React Video Editor</h1>
1
+ # @bylqwjc/react-video-editor
7
2
 
8
- <div align="center">
9
-
10
- Video Editor application using React and TypeScript.
3
+ React build of the video editor package.
11
4
 
12
- <p align="center">
13
- <a href="https://designcombo.dev/">Combo</a>
14
- ·
15
- <a href="https://discord.gg/jrZs3wZyM5">Discord</a>
16
- ·
17
- <a href="https://github.com/designcombo/react-video-editor">X</a>
18
- </p>
19
- </div>
20
-
21
- [![](https://raw.githubusercontent.com/designcombo/react-video-editor/main/images/combo.png)](https://github.com/designcombo/react-video-editor)
22
-
23
- ## ✨ Features
24
-
25
- - 🎬 Timeline Editing: Arrange and trim media on a visual timeline.
26
- - 🌟 Effects and Transitions: Apply visual effects, filters, and transitions.
27
- - 🔀 Multi-track Support: Edit multiple video and audio tracks simultaneously.
28
- - 📤 Export Options: Save videos in various resolutions and formats.
29
- - 👀 Real-time Preview: See immediate previews of edits.
30
-
31
- ## 🚀 See It in Action
32
-
33
- Check out the deployed version here: [React Video Editor Live Demo](https://video.designcombo.dev/)
34
-
35
- ## Package Usage
36
-
37
- Install the package:
5
+ ## Install
38
6
 
39
7
  ```bash
40
- npm install @bylqwjc/react-video-editor
8
+ npm install @bylqwjc/react-video-editor react react-dom
41
9
  ```
42
10
 
43
- Import the React entry when the host project already uses React:
11
+ ## Usage
44
12
 
45
13
  ```tsx
46
14
  import { VideoEditorLauncher } from "@bylqwjc/react-video-editor";
47
15
  import "@bylqwjc/react-video-editor/styles.css";
48
16
  ```
49
17
 
50
- Import the web component entry for Vue or other non-React hosts:
51
-
52
- ```ts
53
- import "@bylqwjc/react-video-editor/styles.css";
54
- import {
55
- openVideoEditor,
56
- registerVideoEditorElement,
57
- } from "@bylqwjc/react-video-editor/web-component";
58
- ```
59
-
60
- The `web-component` bundle is published as a self-contained browser build, so consumers do not need to rebundle `framer-motion`, `next-themes`, or React internals just to open the editor.
61
-
62
- ## ⌨️ Development
63
-
64
- ### Environment Variables
65
-
66
- Create a `.env` file in the project root and add the following:
67
-
68
- ```env
69
- PEXELS_API_KEY=""
70
- ```
71
-
72
- Clone locally:
73
-
74
- ```bash
75
- git clone git@github.com:designcombo/react-video-editor.git
76
- cd react-video-editor
77
- pnpm install
78
- pnpm dev
79
- ```
80
-
81
- Open your browser and visit http://localhost:3000 , see more at [Development](https://github.com/designcombo/react-video-editor).
82
-
83
- ## 📝 License
84
-
85
- Copyright © 2025 [DesignCombo](https://designcombo.dev/).
18
+ This package keeps `react` and `react-dom` as peer dependencies to keep the published package smaller for React hosts.
package/package.json CHANGED
@@ -1,45 +1,31 @@
1
1
  {
2
2
  "name": "@bylqwjc/react-video-editor",
3
- "version": "1.0.3",
4
- "description": "React video editor package with React and web component entrypoints.",
3
+ "version": "1.0.5",
4
+ "description": "React build of the video editor with peer React dependencies.",
5
5
  "private": false,
6
- "main": "./dist/react.mjs",
7
- "module": "./dist/react.mjs",
8
- "types": "./dist/react.d.ts",
6
+ "main": "./react.mjs",
7
+ "module": "./react.mjs",
8
+ "types": "./react.d.ts",
9
9
  "files": [
10
10
  "README.md",
11
- "dist"
11
+ "package.json",
12
+ "react.mjs",
13
+ "react.d.ts",
14
+ "styles.css"
12
15
  ],
13
16
  "sideEffects": [
14
- "./dist/styles.css"
17
+ "./styles.css"
15
18
  ],
16
19
  "exports": {
17
20
  ".": {
18
- "types": "./dist/react.d.ts",
19
- "import": "./dist/react.mjs"
21
+ "types": "./react.d.ts",
22
+ "import": "./react.mjs"
20
23
  },
21
24
  "./react": {
22
- "types": "./dist/react.d.ts",
23
- "import": "./dist/react.mjs"
25
+ "types": "./react.d.ts",
26
+ "import": "./react.mjs"
24
27
  },
25
- "./web-component": {
26
- "types": "./dist/web-component.d.ts",
27
- "import": "./dist/web-component.mjs"
28
- },
29
- "./styles.css": "./dist/styles.css"
30
- },
31
- "scripts": {
32
- "dev": "next dev",
33
- "build": "next build",
34
- "build:sdk": "node scripts/build-sdk.mjs",
35
- "pack:check": "npm pack --dry-run",
36
- "start": "next start",
37
- "lint": "next lint",
38
- "migrate:up": "tsx scripts/migrate.ts up",
39
- "migrate:down": "tsx scripts/migrate.ts down",
40
- "cleanup-db": "tsx scripts/cleanup-db.ts",
41
- "format": "biome format . --write",
42
- "prepack": "npm run build:sdk"
28
+ "./styles.css": "./styles.css"
43
29
  },
44
30
  "publishConfig": {
45
31
  "access": "public"
@@ -48,107 +34,10 @@
48
34
  "react",
49
35
  "video-editor",
50
36
  "editor",
51
- "remotion",
52
- "web-component"
37
+ "remotion"
53
38
  ],
54
39
  "peerDependencies": {
55
40
  "react": "^19.0.0",
56
41
  "react-dom": "^19.0.0"
57
- },
58
- "devDependencies": {
59
- "@biomejs/biome": "1.9.4",
60
- "@designcombo/animations": "^5.5.8",
61
- "@designcombo/events": "^1.0.2",
62
- "@designcombo/frames": "^0.0.3",
63
- "@designcombo/state": "^5.5.8",
64
- "@designcombo/timeline": "^5.5.8",
65
- "@designcombo/transitions": "^5.5.8",
66
- "@designcombo/types": "^5.4.2",
67
- "@emotion/react": "^11.14.0",
68
- "@emotion/styled": "^11.14.0",
69
- "@google/genai": "^1.6.0",
70
- "@hookform/resolvers": "^3.9.0",
71
- "@interactify/toolkit": "^1.0.0",
72
- "@radix-ui/react-accordion": "^1.2.11",
73
- "@radix-ui/react-avatar": "^1.1.9",
74
- "@radix-ui/react-checkbox": "^1.3.3",
75
- "@radix-ui/react-collapsible": "^1.1.10",
76
- "@radix-ui/react-dialog": "^1.1.14",
77
- "@radix-ui/react-dropdown-menu": "^2.1.14",
78
- "@radix-ui/react-label": "^2.1.6",
79
- "@radix-ui/react-popover": "^1.1.14",
80
- "@radix-ui/react-progress": "^1.1.0",
81
- "@radix-ui/react-scroll-area": "^1.2.8",
82
- "@radix-ui/react-select": "^2.2.5",
83
- "@radix-ui/react-separator": "^1.1.7",
84
- "@radix-ui/react-slider": "^1.3.5",
85
- "@radix-ui/react-slot": "^1.2.2",
86
- "@radix-ui/react-switch": "^1.2.5",
87
- "@radix-ui/react-tabs": "^1.1.12",
88
- "@radix-ui/react-toast": "^1.2.2",
89
- "@radix-ui/react-toggle": "^1.1.9",
90
- "@radix-ui/react-toggle-group": "^1.1.10",
91
- "@radix-ui/react-tooltip": "^1.2.6",
92
- "@remotion/cli": "4.0.340",
93
- "@remotion/media-utils": "4.0.340",
94
- "@remotion/paths": "4.0.340",
95
- "@remotion/player": "4.0.340",
96
- "@remotion/renderer": "4.0.340",
97
- "@remotion/shapes": "4.0.340",
98
- "@remotion/three": "4.0.340",
99
- "@remotion/transitions": "4.0.340",
100
- "@stripe/stripe-js": "^4.10.0",
101
- "@tailwindcss/postcss": "^4",
102
- "@tanstack/react-query": "^5.81.5",
103
- "@tanstack/react-query-devtools": "^5.81.5",
104
- "@types/lodash": "^4.17.17",
105
- "@types/node": "^20",
106
- "@types/pg": "^8.15.4",
107
- "@types/react": "^19",
108
- "@types/react-dom": "^19",
109
- "@types/react-syntax-highlighter": "^15.5.13",
110
- "@types/tinycolor2": "^1.4.6",
111
- "@vercel/analytics": "^1.4.0",
112
- "axios": "^1.10.0",
113
- "class-variance-authority": "^0.7.1",
114
- "clsx": "^2.1.1",
115
- "cmdk": "^1.1.1",
116
- "dotenv": "^17.0.0",
117
- "esbuild": "^0.25.6",
118
- "form-data": "^4.0.3",
119
- "framer-motion": "11",
120
- "kysely": "^0.28.2",
121
- "lodash": "^4.17.21",
122
- "lucide-react": "^0.511.0",
123
- "motion": "^12.12.1",
124
- "nanoid": "^5.1.5",
125
- "next": "^16.0.7",
126
- "next-themes": "^0.4.6",
127
- "pg": "^8.16.3",
128
- "postcss": "^8.5.6",
129
- "react": "^19.0.0",
130
- "react-dom": "^19.0.0",
131
- "react-draggable": "^4.4.6",
132
- "react-dropzone": "^14.3.8",
133
- "react-markdown": "10",
134
- "react-resizable-panels": "^3.0.2",
135
- "react-syntax-highlighter": "^15.6.1",
136
- "remark-gfm": "4",
137
- "remeda": "2",
138
- "remotion": "4.0.340",
139
- "shiki": "1",
140
- "socket.io-client": "^4.8.1",
141
- "sonner": "^2.0.3",
142
- "swr": "^2.3.3",
143
- "tailwind-merge": "^3.3.0",
144
- "tailwindcss": "^4",
145
- "tinycolor2": "^1.6.0",
146
- "tsx": "^4.20.3",
147
- "tw-animate-css": "^1.3.0",
148
- "typescript": "^5",
149
- "vaul": "^1.1.2",
150
- "zod": "^3.25.3",
151
- "zustand": "^5.0.4"
152
- },
153
- "packageManager": "pnpm@10.15.0+sha512.486ebc259d3e999a4e8691ce03b5cac4a71cbeca39372a9b762cb500cfdf0873e2cb16abe3d951b1ee2cf012503f027b98b6584e4df22524e0c7450d9ec7aa7b"
42
+ }
154
43
  }