| 1 | # @html-video/studio-next (experiment) |
| 2 | |
| 3 | Spike to evaluate integrating [`@hyperframes/studio`](https://github.com/heygen-com/hyperframes) (Apache-2.0) |
| 4 | as our editor UI instead of hand-rolling click-to-edit, timeline, property panel, etc. |
| 5 | |
| 6 | ## Status (2026-05-28) |
| 7 | |
| 8 | - ✅ `pnpm dev` boots a Vite + React app on port 3072 |
| 9 | - ✅ `import { SourceEditor } from '@hyperframes/studio'` compiles and renders |
| 10 | - ✅ Side-by-side: CodeMirror editor on the left, srcDoc preview on the right |
| 11 | - ⚠️ `useElementPicker` / `Player` / `Timeline` talk to the iframe via |
| 12 | `postMessage` and require the iframe to host the **hyperframes runtime** |
| 13 | (responds to `{ source: "hf-parent", type: "control", action: "enable-pick-mode" }` |
| 14 | etc). Our agent-generated HTML does not have that runtime, so those |
| 15 | components don't drop in. |
| 16 | |
| 17 | ## Read this before doing more work here |
| 18 | |
| 19 | What we **can** lift directly (no runtime requirement): |
| 20 | |
| 21 | - `SourceEditor` — CodeMirror 6 wrapper for HTML / CSS / JS |
| 22 | - `applyPatch`, `parseStyleString`, `mergeStyleIntoTag`, `findElementBlock` |
| 23 | from `@hyperframes/studio/utils` |
| 24 | - `EaseCurveEditor` (visual GSAP curve picker — works on a value/onChange interface) |
| 25 | |
| 26 | What we **can't** lift without bigger work: |
| 27 | |
| 28 | - `useElementPicker` (postMessage handshake) |
| 29 | - `Player`, `PlayerControls`, `Timeline`, `VideoThumbnail` (require runtime) |
| 30 | - `NLELayout`, `StudioApp` (pull in their Composition + FileManager data model) |
| 31 | |
| 32 | ## How to run |
| 33 | |
| 34 | ```bash |
| 35 | pnpm install # from monorepo root |
| 36 | pnpm --filter @html-video/studio-next dev |
| 37 | # → http://127.0.0.1:3072 |
| 38 | ``` |
| 39 | |
| 40 | Production studio still lives at `packages/project-studio/` (port 3071). |
| 41 | This package is a spike — do not depend on it. |
| 42 |