An editor that belongs
to your product.
Put a canvas, timeline and layer panel inside your app. Start with the complete workbench, or arrange the panels in your own layout.
Film outline
- Editframe's editor panels in your app. Wren, an example campaign app, places Editframe's editor panels in its own layout.
- Edit the headline. Select the headline, move and resize it on the canvas, then retype it in Wren's inspector.
- Trim and scrub on the timeline. Trim the footage, then scrub. Canvas and timeline follow one composition clock.
- Restyle every panel. Wren's CSS variables restyle every Editframe panel at once.
- Export the MP4. Export the edited Daybreak spot as an MP4 in the browser.
Start with the workbench.
ef-workbench wraps your composition. It connects a layer panel, a fitted canvas, a timeline, playback controls and an export button to the root timegroup.
<ef-workbench style="width: 100%; height: 100vh; display: block;">
<ef-timegroup id="root" mode="contain">
<!-- your composition -->
</ef-timegroup>
</ef-workbench>The same editor in React:
import { Timegroup, Workbench } from "@editframe/react";
<Workbench>
<Timegroup mode="contain">
{/* your composition */}
</Timegroup>
</Workbench>Or arrange the panels yourself.
Place the canvas, timeline, layer panel and controls wherever your product needs them. Each panel takes a target, the id of the composition it edits. Panels with the same target share its playback clock and its selection.
<ef-canvas>
<ef-timegroup id="composition" mode="contain">
<!-- your composition -->
</ef-timegroup>
</ef-canvas>
<ef-hierarchy target="composition"></ef-hierarchy>
<ef-timeline target="composition"></ef-timeline>
<ef-controls target="composition">
<ef-scrubber></ef-scrubber>
<ef-time-display></ef-time-display>
</ef-controls>Restyle it with your colors.
Every panel reads its colors from --ef-color-* variables, which inherit through shadow roots. Set them on the element that holds your panels.
Panels you place directly also expose ::part() names for finer control, such as the scrubber's playhead.
.wren-editor {
--ef-color-bg: #f3eee6;
--ef-color-bg-panel: #ffffff;
--ef-color-text: #1d2b28;
--ef-color-primary: #ef5f3c;
--ef-color-type-video: #2f7d6d;
}
ef-scrubber::part(playhead) {
background: #ef5f3c;
}Start from a study in the motion catalog.
Browse all studies ↗
Build your editor.
The guide builds a composition, adds playback controls, then puts it in a workbench.