@bylqwjc/react-video-editor 1.0.4 → 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 (12) hide show
  1. package/README.md +6 -78
  2. package/package.json +17 -128
  3. package/react.mjs +1421 -0
  4. package/styles.css +2 -0
  5. package/dist/chunks/chunk-OKB2FJUI.mjs +0 -1414
  6. package/dist/chunks/chunk-YP7ILKMI.mjs +0 -1
  7. package/dist/chunks/frames-KWJYA55E.mjs +0 -8
  8. package/dist/react.mjs +0 -1
  9. package/dist/styles.css +0 -2
  10. package/dist/web-component.d.ts +0 -35
  11. package/dist/web-component.mjs +0 -1
  12. /package/{dist/react.d.ts → react.d.ts} +0 -0
package/README.md CHANGED
@@ -1,90 +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
-
22
- ## ✨ Features
23
-
24
- - 🎬 Timeline Editing: Arrange and trim media on a visual timeline.
25
- - 🌟 Effects and Transitions: Apply visual effects, filters, and transitions.
26
- - 🔀 Multi-track Support: Edit multiple video and audio tracks simultaneously.
27
- - 📤 Export Options: Save videos in various resolutions and formats.
28
- - 👀 Real-time Preview: See immediate previews of edits.
29
-
30
- ## 🚀 See It in Action
31
-
32
- Check out the deployed version here: [React Video Editor Live Demo](https://video.designcombo.dev/)
33
-
34
- ## Package Usage
35
-
36
- Install the package:
5
+ ## Install
37
6
 
38
7
  ```bash
39
- npm install @bylqwjc/react-video-editor
8
+ npm install @bylqwjc/react-video-editor react react-dom
40
9
  ```
41
10
 
42
- Import the React entry when the host project already uses React:
11
+ ## Usage
43
12
 
44
13
  ```tsx
45
14
  import { VideoEditorLauncher } from "@bylqwjc/react-video-editor";
46
15
  import "@bylqwjc/react-video-editor/styles.css";
47
16
  ```
48
17
 
49
- Import the web component entry for Vue or other non-React hosts:
50
-
51
- ```ts
52
- import "@bylqwjc/react-video-editor/styles.css";
53
- import {
54
- openVideoEditor,
55
- registerVideoEditorElement,
56
- } from "@bylqwjc/react-video-editor/web-component";
57
- ```
58
-
59
- If the host app does not already provide them, install the package peer dependencies as well:
60
-
61
- ```bash
62
- npm install react react-dom
63
- ```
64
-
65
- The `web-component` entry is published as an ESM build that shares the package peer React runtime, while still bundling the editor-specific dependencies.
66
-
67
- ## ⌨️ Development
68
-
69
- ### Environment Variables
70
-
71
- Create a `.env` file in the project root and add the following:
72
-
73
- ```env
74
- PEXELS_API_KEY=""
75
- ```
76
-
77
- Clone locally:
78
-
79
- ```bash
80
- git clone git@github.com:designcombo/react-video-editor.git
81
- cd react-video-editor
82
- pnpm install
83
- pnpm dev
84
- ```
85
-
86
- Open your browser and visit http://localhost:3000 , see more at [Development](https://github.com/designcombo/react-video-editor).
87
-
88
- ## 📝 License
89
-
90
- 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.4",
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
  }