Editframe
Start
/
Editor Toolkit

Editor Toolkit

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.

Before opening any reference file, answer:

What kind of editor does the user need?

NeedStart here
Just play/pause + seekMinimal: ef-preview + ef-controls
Visual timeline of clipsAdd ef-filmstrip
Layer panel (select/reorder)Add ef-hierarchy
Full editor with all panelsUse ef-workbench
Canvas manipulation (drag/resize)Add ef-canvas + ef-transform-handles

Build editors incrementally — start minimal, add components only when needed.

The Composition Model

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.

Progressive Levels

Level 1 — Minimal (Preview + Controls)

<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>

Level 2 — Timeline (add Filmstrip)

<ef-filmstrip target="comp" pixels-per-ms="0.1"></ef-filmstrip>

Level 3 — Layers (add Hierarchy)

<ef-hierarchy target="comp"></ef-hierarchy>

Level 4 — Full Editor (Workbench)

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>

Getting Started

Preview & Canvas

Playback Controls

Timeline

Transform & Manipulation

Overlay System

Editor Shells