shadcn-labs 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