editframe/editor

An editor that belongs
to your product.

Add a timeline, preview, and editing controls to your app. Start with a complete editor or assemble the parts your customers need.

Build an editor →Browse the components →

Explore the architecture

Editor components

One component.
Or just the parts you need.

Full editor shell

<ef-workbench style="width: 100%; height: 100vh; display: block;">
  <ef-timegroup id="root" mode="contain">
    <!-- your composition -->
  </ef-timegroup>
</ef-workbench>

The workbench wires its hierarchy, fitted canvas, timeline, transport, zoom, and export controls to the root composition. Wired together. One component.

Compose from parts

<ef-canvas>
  <ef-timegroup id="composition" mode="contain"></ef-timegroup>
</ef-canvas>
<ef-timeline target="composition"></ef-timeline>
<ef-hierarchy target="composition"></ef-hierarchy>

Components

ef-workbench	Full editor — preview, timeline, hierarchy, export
ef-timeline	Zoomable tracks, hierarchy, synchronized playback
ef-preview	Canvas with zoom-to-fit and overlay integration
ef-canvas	Element selection, drag-to-reposition
ef-transform-handles	Drag to resize and rotate on canvas
ef-trim-handles	Drag in/out points on the timeline
ef-hierarchy	Layer panel with collapsible groups
ef-scrubber	Frame-accurate seek, keyboard shortcuts
ef-pan-zoom	Pan and zoom the preview canvas

Integration

Make the editor recognize your brand.

Web components

import '@editframe/elements'

<ef-workbench resolution="1920x1080">
  <ef-timegroup mode="contain"></ef-timegroup>
</ef-workbench>

React

import { Timegroup, Workbench } from
  '@editframe/react'

<Workbench resolution="1920x1080">
  <Timegroup mode="contain" />
</Workbench>

Every component exposes its internals via CSS ::part() selectors. Style parts such as the track, playhead, and handles with standard CSS. Apply your design system where the component surface needs it.

ef-timeline-row::part(track) {
  background: #1a1a2e;
  border-radius: 4px;
}
ef-scrubber::part(playhead) {
  background: #e94560;
}
ef-transform-handles::part(handle) {
  background: #e94560;
}

Motion catalog