Editor Toolkit

Build video editing interfaces by composing GUI components. Each component is a self-contained building block that connects to your composition via target attributes. The composition itself is built with the composition skill — these components provide the controls and views around it.

Quick Start

<ef-timegroup id="my-video" mode="fixed" duration="5s">
  <ef-video src="/video.mp4" duration="5s"></ef-video>
</ef-timegroup>

<ef-controls target="my-video">
  <ef-toggle-play></ef-toggle-play>
  <ef-scrubber></ef-scrubber>
  <ef-time-display></ef-time-display>
</ef-controls>

Getting Started

• references/editor-toolkit.md — How to compose editor components

Preview & Canvas

• references/preview.md — Preview container with focus tracking
• references/canvas.md — Interactive canvas with selection and drag-and-drop
• references/pan-zoom.md — Pan and zoom container with gestures
• references/focus-overlay.md — Highlight focused element
• references/fit-scale.md — Responsive aspect-ratio scaling

Playback Controls

• references/controls.md — Context bridge for disconnected controls
• references/play.md — Play button
• references/pause.md — Pause button
• references/toggle-play.md — Combined play/pause toggle
• references/toggle-loop.md — Loop toggle

Timeline

• references/timeline.md — Full-featured timeline editor
• references/filmstrip.md — Visual timeline with tracks
• references/scrubber.md — Seek control
• references/time-display.md — Current time / duration display
• references/timeline-ruler.md — Time ruler with frame markers
• references/trim-handles.md — Interactive trim controls
• references/thumbnail-strip.md — Video thumbnail preview strip

Transform & Manipulation

• references/transform-handles.md — Resize and rotation handles
• references/resizable-box.md — Resizable container with drag handles
• references/dial.md — Rotary angle input

Overlay System

• references/overlay-layer.md — Container for positioned overlays
• references/overlay-item.md — Track and follow target elements

Editor Shells

• references/workbench.md — Full editor UI with preview, timeline, hierarchy, and export
• references/hierarchy.md — Layer panel with selection and drag-and-drop
• references/active-root-temporal.md — Display active root element ID