ef-workbench

Complete video editor interface with preview, timeline, hierarchy panel, and export controls.

Basic Usage

Wrap a composition to add a full editing interface:

<ef-workbench class="w-full h-screen">
  <ef-pan-zoom slot="canvas">
    <ef-fit-scale>
      <ef-timegroup mode="sequence" class="w-[720px] h-[480px] bg-black">
        <ef-timegroup mode="fixed" duration="3s" class="flex items-center justify-center">
          <ef-text duration="3s" class="text-white text-4xl">First Scene</ef-text>
        </ef-timegroup>
        <ef-timegroup mode="fixed" duration="3s" class="flex items-center justify-center">
          <ef-text duration="3s" class="text-white text-4xl">Second Scene</ef-text>
        </ef-timegroup>
      </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 border-b border-gray-700">
      <ef-toggle-play>
        <button slot="play" class="px-3 py-1 bg-blue-600 text-white rounded">Play</button>
        <button slot="pause" class="px-3 py-1 bg-gray-600 text-white rounded">Pause</button>
      </ef-toggle-play>
      <ef-time-display class="text-sm text-gray-300"></ef-time-display>
    </ef-controls>
    <ef-filmstrip class="flex-1"></ef-filmstrip>
  </div>
</ef-workbench>

Workbench Layout

The workbench provides a three-panel layout:

• Canvas (center) - Preview with pan/zoom controls
• Hierarchy (left sidebar) - Layer panel showing composition structure
• Timeline (bottom) - Playback controls and timeline visualization

Slots

canvas

Main preview area. Should contain a timegroup wrapped in ef-pan-zoom and ef-fit-scale:

<ef-pan-zoom slot="canvas">
  <ef-fit-scale>
    <ef-timegroup mode="contain" class="w-[1920px] h-[1080px]">
      <!-- composition content -->
    </ef-timegroup>
  </ef-fit-scale>
</ef-pan-zoom>

hierarchy

Left sidebar for layer management:

<ef-hierarchy slot="hierarchy"></ef-hierarchy>

timeline

Bottom panel for playback controls and timeline:

<div slot="timeline" class="flex flex-col">
  <ef-controls class="border-b">
    <!-- playback controls -->
  </ef-controls>
  <ef-filmstrip class="flex-1"></ef-filmstrip>
</div>

Preview Modes

Workbench supports two preview rendering modes:

• DOM mode (default) - Shows the real timegroup DOM directly
• Canvas mode - Renders to canvas each frame for consistent output

Toggle modes via the toolbar settings button.

Render Mode

When rendering="true", workbench hides the UI and shows only the canvas. Used for server-side rendering:

<ef-workbench rendering>
  <ef-timegroup slot="canvas" mode="contain">
    <!-- composition -->
  </ef-timegroup>
</ef-workbench>

Export

Click the Export button in the toolbar to render the composition to video. Configure export settings in the popup:

• Scale - Resolution multiplier (25%, 50%, 75%, 100%)
• Audio - Include audio tracks
• Range - Export full duration or custom in/out range

Export uses browser WebCodecs API for local rendering. Progress updates show:

• Current frame / total frames
• Elapsed time / total duration
• Render speed multiplier
• Estimated time remaining
• Live preview thumbnail

Theme

Workbench respects system theme by default. Toggle between light, dark, and system modes via the toolbar button.

Performance Stats

Enable the performance overlay via toolbar settings to see:

• FPS - Actual frame rate
• Render - Average render time per frame (canvas mode)
• Headroom - Time budget remaining (canvas mode)
• Resolution - Current render resolution
• Scale - Resolution scale percentage (canvas mode)
• CPU - Compute pressure state
• State - Motion state (playing, scrubbing, or at rest)

Auto resolution mode dynamically adjusts render resolution during playback to maintain smooth performance.

Fit to Content

Click the fit-to-content button in the toolbar to reset zoom and center the composition.