让开源，少一点语言距离。
npm包中文文档

@hyperframes/studio

中文文档
0.8.226发布于 2026/11/01TypeScriptES Module构建来源已验证

Browser-based composition editor UI for Hyperframes. Provides a visual timeline, code editor, and live preview for building video compositions.

原始使用文档
中文原文
文档目录6 节
  1. Install
  2. What it does
  3. Development
  4. Tech stack
  5. Documentation
  6. Related packages

@hyperframes/studio

Browser-based composition editor UI for Hyperframes. Provides a visual timeline, code editor, and live preview for building video compositions.

Install

npm install @hyperframes/studio

What it does

The studio is a React application with:

  • Visual timeline — drag, resize, and arrange elements on tracks
  • Code editor — edit HTML and GSAP scripts with CodeMirror (syntax highlighting, autocomplete)
  • Live preview — see changes in real time as you edit
  • Composition inspector — view and modify element properties

Development

The studio is embedded in the hyperframes preview command. To develop the studio UI itself:

cd packages/studio
bun run dev        # Start Vite dev server
bun run build      # Build for production
bun run typecheck  # Type-check

Tech stack

  • React 19, Zustand 4/5 (state management; development uses Zustand 5)
  • CodeMirror 6 (editor)
  • Tailwind CSS (styling)
  • Vite (bundler)
  • Phosphor Icons

Documentation

Full documentation: hyperframes.heygen.com/packages/studio

版本与发布记录

@hyperframes/studio 共发布 584 个版本，首次发布于 2026/03/23；过去 12 个月发布了 584 个版本。最新版本附带 npm provenance 构建来源证明，可追溯到公开的 CI 构建记录。

版本发布日期距今
0.8.226latest2026/11/012 天前
0.8.2252026/11/012 天前
0.8.2242026/11/012 天前
0.8.2232026/10/313 天前
0.8.2222026/10/313 天前
0.8.2212026/10/304 天前

其他发布通道：alpha → 0.7.67-alpha.0，desktop → 0.8.53-desktop.0，hdr → 0.8.190-hdr.1。

关于 @hyperframes/studio 的常见问题

@hyperframes/studio 是什么？

用于超帧的基于浏览器的组合编辑器UI。提供可视化时间轴、代码编辑器和实时预览，用于构建视频组合。

如何安装 @hyperframes/studio？

在项目目录运行 npm install @hyperframes/studio，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（19）、zustand（^4.0.0 || ^5.0.0）、react-dom（19）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

@hyperframes/studio 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

@hyperframes/studio 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node.js 20.19+ / 22.12+ 可以直接 require() 不含顶层 await 的 ES Module，更早的版本需要改用动态 import()。

@hyperframes/studio 可以商用吗？

@hyperframes/studio 使用 未声明 许可。package.json 没有声明许可证。没有许可证的代码默认保留全部权利，商用前请联系作者或查看仓库中的 LICENSE 文件。以上为概括，不构成法律意见，请以许可原文为准。

@hyperframes/studio 还在维护吗？

最新版本 0.8.226 发布于 2026/11/01（2 天前）；至今共发布 584 个版本，其中过去 12 个月发布了 584 个；首次发布于 2026/03/23。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。