Editframe logoEditframe

Editor UI

Editframe provides a comprehensive set of custom HTML elements for building professional video editor interfaces. These components work together to create full-featured editing experiences.

Core Containers

These elements provide the foundational structure for your editor:

  • Workbench - Main container for editor interfaces with structured layout
  • Preview - Lightweight preview container with context management
  • Configuration - Global configuration and API settings

Playback Controls

Elements for controlling video playback:

Timeline & Visualization

Elements for timeline visualization and interaction:

  • Filmstrip - Visual timeline with hierarchical track display

Visual Editors

Interactive editing components:

  • Dial - Rotational value input control
  • Resizable Box - Draggable and resizable bounding box

Getting Started

To build a basic video editor, you'll typically combine these elements:

<ef-configuration api-host="https://api.editframe.com">
  <ef-workbench>
    <!-- Canvas area with your video content -->
    <ef-timegroup slot="canvas" mode="sequence" className="w-[1920px] h-[1080px]">
      <ef-video src="/video.mp4"></ef-video>
    </ef-timegroup>
    
    <!-- Timeline area with controls -->
    <div slot="timeline" className="flex flex-col gap-4 p-4">
      <div className="flex items-center gap-4">
        <ef-toggle-play>
          <button slot="play">▶ Play</button>
          <button slot="pause">⏸ Pause</button>
        </ef-toggle-play>
        <ef-scrubber className="flex-1"></ef-scrubber>
        <ef-time-display></ef-time-display>
        <ef-toggle-loop>
          <button>🔁 Loop</button>
        </ef-toggle-loop>
      </div>
      <ef-filmstrip></ef-filmstrip>
    </div>
  </ef-workbench>
</ef-configuration>

Remote Controls

Use the <ef-controls> element to control a preview from anywhere in your application:

<ef-preview id="my-preview">
  <!-- Video content -->
</ef-preview>

<!-- Controls can be anywhere, even outside the preview -->
<ef-controls target="my-preview">
  <ef-toggle-play>
    <button slot="play">Play</button>
    <button slot="pause">Pause</button>
  </ef-toggle-play>
  <ef-scrubber></ef-scrubber>
</ef-controls>

Customization

All editor UI elements can be extensively customized with CSS:

  • Use CSS custom properties for colors and sizing
  • Style using standard CSS selectors
  • Leverage CSS parts for deep styling where available
  • Use Tailwind or any CSS framework

See individual element documentation for specific customization options.

Examples & Patterns

Complete working examples to help you get started: