mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-10-30 09:16:55 +00:00
Miguel Ángel
86fa10ced4
* fix(studio): serve preview assets by URL instead of inlining them as base64 The Studio preview route serves project files under a base href, but both preview adapters called the bundler with its self-contained defaults, so every image and font was inlined once per reference. One exported option set now owns how a preview bundle is built. * test(studio): cover poster, srcset and sub-composition preview asset URLs Also types the Vite adapter bundler with BundleOptions, so the shared preview options are checked against the real option set. * fix(studio): tag a preview asset for revalidation only once it has settled Preview assets are now served by URL, so the asset route serves every image and video. It tagged them by mtime and size; two same-size writes inside one filesystem tick share an mtime, and copy tools (cp -p, rsync) set mtime back, so a browser could keep stale bytes after an edit. The route now tags a file by inode, change time and size, and only once its last change is three seconds old; a younger file is served without a tag and refetched.
@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