Build video editing interfaces with Editframe's GUI components. Assemble timeline, scrubber, filmstrip, preview, playback controls, and transform handles.
Build video editing interfaces by composing GUI components around a composition. The composition itself is built with the composition skill — these components provide the controls and views around it.
What kind of editor does the user need?
| Need | Start here |
|---|---|
| Just play/pause + seek | Minimal: ef-preview + ef-controls |
| Visual timeline of clips | Add ef-filmstrip |
| Layer panel (select/reorder) | Add ef-hierarchy |
| Full editor with all panels | Use ef-workbench |
| Canvas manipulation (drag/resize) | Add ef-canvas + ef-transform-handles |
Build editors incrementally — start minimal, add components only when needed.
Every editor has one composition (a ef-timegroup with an id). All GUI components reference it.
ef-preview ← renders the composition
└── ef-timegroup id="comp" ← the composition
ef-controls target="comp" ← connects to the composition by id
├── ef-toggle-play
├── ef-scrubber
└── ef-time-display
ef-filmstrip target="comp" ← visual timeline view
ef-hierarchy target="comp" ← layer list
The target attribute connects any control or view to a composition outside its DOM ancestry. Without it, controls look up the DOM tree for the nearest timegroup.
<ef-preview>
<ef-timegroup id="comp" mode="sequence" class="w-[1920px] h-[1080px]">
<!-- your composition -->
</ef-timegroup>
</ef-preview>
<ef-controls target="comp" class="flex items-center gap-4">
<ef-toggle-play></ef-toggle-play>
<ef-time-display></ef-time-display>
<ef-scrubber class="flex-1"></ef-scrubber>
<ef-toggle-loop></ef-toggle-loop>
</ef-controls>
<ef-filmstrip target="comp" pixels-per-ms="0.1"></ef-filmstrip>
<ef-hierarchy target="comp"></ef-hierarchy>
ef-workbench provides a complete shell with named slots — no manual layout needed:
<ef-workbench class="w-full h-screen">
<ef-pan-zoom slot="canvas">
<ef-fit-scale>
<ef-timegroup mode="sequence" class="w-[1920px] h-[1080px]">
<!-- composition -->
</ef-timegroup>
</ef-fit-scale>
</ef-pan-zoom>
<ef-hierarchy slot="hierarchy"></ef-hierarchy>
<div slot="timeline" class="h-full flex flex-col">
<ef-controls class="flex items-center gap-2 p-2">
<ef-toggle-play></ef-toggle-play>
<ef-time-display></ef-time-display>
<ef-scrubber class="flex-1"></ef-scrubber>
</ef-controls>
<ef-filmstrip class="flex-1"></ef-filmstrip>
</div>
</ef-workbench>