@hyperframes /工作室
用于超帧的基于浏览器的组合编辑器UI。提供可视化时间轴、代码编辑器和实时预览,用于构建视频组合。
安装
npm install @hyperframes/studio
它是做什么的
该工作室是一个React应用程序,具有:
- 视觉的时间表 -拖动、调整大小和排列轨道上的元素
- 代码编辑器 -使用CodeMirror编辑HTML和GSAP脚本(语法高亮,自动完成)
- 活的预览 -在编辑时实时查看更改
- 作文检查员 -查看和修改元素属性
开发
工作室嵌入在 hyperframes preview 命令。开发工作室UI本身:
cd packages/studio
bun run dev # Start Vite dev server
bun run build # Build for production
bun run typecheck # Type-check
技术堆栈
- React 19, Zustand 4/5(状态管理,开发使用Zustand 5)
- codemmirror 6(编辑器)
- 顺风CSS(样式)
- 轻快地(打包机)
- 磷的图标
文档
完整的文档: hyperframes.heygen.com/packages/studio
相关的包
@hyperframes/core-编辑器使用的类型和解析器hyperframes-通过hyperframes preview