editframe/editor
Ship a video editor
without building the hard parts.
Drop in a timeline, canvas, scrubber, and transform handles. Style everything to match your product. No video engineering experience required.
0s2s4s6s8s10s
ef-video
ef-text
ef-audio
What's included
Everything a video editor needs.
Nothing you have to build yourself.
Full editor — one line
<ef-workbench></ef-workbench>Timeline, scrubber, preview, hierarchy, and export controls. Wired together. One component.
Or compose from parts
<ef-preview></ef-preview>
<ef-timeline></ef-timeline>
<ef-hierarchy></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 |
| ef-focus-overlay | Focus ring on selected element |
Integration
Looks like your product, not ours.
Web components
import '@editframe/elements'
<ef-workbench></ef-workbench>React
import { Workbench } from
'@editframe/react'
<Workbench />Every component exposes its internals via CSS ::part() selectors. Style any part of it with standard CSS: the track, the playhead, the handles, all of it. Your design system, applied in an afternoon. No theme system, no config files, no negotiation.
ef-timeline::part(track) {
background: #1a1a2e;
border-radius: 4px;
}
ef-timeline::part(playhead) {
background: #e94560;
}
ef-transform-handles::part(handle) {
background: #e94560;
}Stop building the editor.
Start building the product.
Every component you need, pre-built and pre-wired. Style it to match your product and ship.