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 a complete playback control bar, demonstrating play/pause transport controls, editable playhead timecode, loop range boundaries (in/out markers), snapping toggle, and zooming/panning sliders.
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
A video opacity automation demo with engine-level clip keyframes, draggable DOM handles, canvas keyframe rendering, and live HTML media preview evaluation.
Timeline Stress Test & Benchmark
A high-density stress test and performance benchmark demo, enabling configurable tracks, clips, and timeline durations with a real-time FPS monitor, automated scrubbing test, and React DOM reconciliation overhead toggle.
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.