mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-10-30 17:27:09 +00:00
Miguel Ángel
5b034cab74
* fix(studio): an effect save resolves with whether it landed, was refused or failed setElementFxAttribute.setQuiet and setAudioGroupAttribute.setQuiet, which every timeline effect save goes through, resolved the same way whether the write landed, the host's canEdit refused it, recording blocked it, or the write failed; only Studio's toast told them apart. They now resolve with a TimelineEditOutcome: saved, refused with the reason, or failed with the error. The lock guard resolves with the refusal handler's result, and a clip that cannot be addressed in its file reports failed instead of saved. * fix(studio): the lock guard hands its reason to the refused effect save The refusal reason comes from the gate's own canEdit pass instead of a second call, a group save with nothing to address reports failed like the clip save, and the failure message says the clip has no id to save it by.
@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
Related packages
@hyperframes/core— types and parsers used by the editorhyperframes— CLI that serves the studio viahyperframes preview