ext/hyperframes
2
0
Fork 0
mirror of https://github.com/heygen-com/hyperframes.git synced 2026-09-03 04:38:33 +00:00
Code Issues Packages Projects Releases Wiki Activity
Files
997e3948e4a36469002f55529ba0e207c65f6ac4
hyperframes/packages/studio
T
History
Miguel Ángel 997e3948e4 fix(studio): use host composition dimensions for all added blocks 
Blocks were using their own native dimensions (e.g. 1920x1080) instead
of the host composition dimensions (e.g. 1280x720), causing them to
overflow the viewport and break the layout. The block's iframe scales
its content to fit the container, so using host dimensions is correct.
2026-05-21 18:28:17 -04:00
..
frontend
refactor(studio): contexts, PropertyPanel split, duration fix, perf (#748)
2026-05-12 20:18:52 +02:00
public
refactor(studio): contexts, PropertyPanel split, duration fix, perf (#748)
2026-05-12 20:18:52 +02:00
src
fix(studio): use host composition dimensions for all added blocks
2026-05-21 18:28:17 -04:00
.gitignore
refactor(studio): update layout, config, and remove agent activity tracking (#64)
2026-03-28 20:45:00 +01:00
index.html
refactor(studio): contexts, PropertyPanel split, duration fix, perf (#748)
2026-05-12 20:18:52 +02:00
package.json
chore: bump version to 0.6.31
2026-05-21 12:22:12 -04:00
postcss.config.js
initial code (#2)
2026-03-21 22:43:56 -07:00
README.md
feat(skills): add hyperframes-cli skill (#154)
2026-03-31 00:30:55 -07:00
tailwind.config.js
refactor(studio): code quality — 22 findings, dead code removal, App.tsx split (#144)
2026-03-31 04:21:12 +02:00
tsconfig.json
fix: remove hidden audio gain in renders (#362)
2026-04-21 20:33:25 +02:00
vite.adapter.ts
feat(studio): full Blocks panel — browse, search, add, drag-and-drop registry items
2026-05-18 21:15:15 -04:00
vite.browser.ts
feat(studio): timeline UI overhaul — flat clips, unified color, working thumbnails
2026-05-20 23:54:19 -04:00
vite.config.ts
fix(studio): server-side DOM patching, render CSS scoping, and resilience
2026-05-20 17:07:31 -04:00
vite.producer.test.ts
fix: harden studio timeline editing and local renders (#463)
2026-04-24 00:18:37 +02:00
vite.producer.ts
fix: harden studio timeline editing and local renders (#463)
2026-04-24 00:18:37 +02:00
vite.request-body.test.ts
feat(studio): drag assets from the sidebar onto the timeline (#464)
2026-04-24 02:50:36 +02:00
vite.request-body.ts
feat(studio): drag assets from the sidebar onto the timeline (#464)
2026-04-24 02:50:36 +02:00
vite.studioMotion.test.ts
refactor(studio): contexts, PropertyPanel split, duration fix, perf (#748)
2026-05-12 20:18:52 +02:00
vite.studioMotion.ts
refactor(studio): contexts, PropertyPanel split, duration fix, perf (#748)
2026-05-12 20:18:52 +02:00
vite.thumbnail.test.ts
fix: align Studio capture with preview (#595)
2026-05-02 03:45:38 +02:00
vite.thumbnail.ts
fix: align Studio capture with preview (#595)
2026-05-02 03:45:38 +02:00

README.md

@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 18/19, Zustand (state management)
  • CodeMirror 6 (editor)
  • Tailwind CSS (styling)
  • Vite (bundler)
  • Phosphor Icons

Documentation

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

Related packages

Reference in New Issue View Git Blame Copy Permalink