Demos
Timeline editor demos
Start with focused, source-backed examples where the live demo and code tabs come from the same files.
Basic Timeline
A minimal timeline with draggable clips, a visible playhead, canvas rendering, and enough state to explain the editor model.
Mediabunny Adapter Sync
A frame-aware preview surface where Mediabunny owns the playback clock and Canvas Timeline maps playhead time to source media time.
HTML Media Adapter Sync
A native HTML media preview where Canvas Timeline drives one HTMLMediaElement, including embedded video audio, through the React media adapter.
Timeline Editor Controls
A timeline with playback controls, editable timecode, in/out loop boundaries, snapping, markers, clip splitting, resizable track headers, and scrollbars for zooming and panning.
Clip Grouping
A two-track timeline with one video clip and one audio clip that can be selected, grouped, moved together, and ungrouped.
Drag Media Onto Timeline
Drop app-owned media assets onto a two-track timeline, including linked video and audio placements that land as one grouped edit.
Opacity Keyframes
Edit opacity with group selection, precise timecode and value fields, an expandable curve lane, easing presets, and linked Bezier tangents. Preview edits live and undo each gesture in one step.
Timeline Stress Test & Benchmark
A configurable timeline benchmark with track, clip, duration, and keyframe data density controls; scrub and zoom FPS tests; drag preview timings; and isolated commit/undo timings in Canvas or React DOM mode.
React DOM Timeline
A timeline editor utilizing pure React and DOM elements to render tracks, clips, and a switchable seconds, timecode, or frame-number ruler while retaining all state, control, and interaction layers.
Custom playhead
Demonstrates a fully customized DOM playhead with a real-time timecode readout, glowing line, and custom hover/dragging states using render props.