Skip to main content

Mobile Multi-Clip Editing

Touch-optimized clip editing for phones and tablets. Uses delay-based touch activation to distinguish between scroll gestures and drag operations.

Loading...

Mobile Optimizations

This example uses special settings for better mobile experience:

Touch delay (250ms) - Touch and hold to start dragging, quick swipes scroll normally
Larger touch targets (24px) - Clip boundaries are wider for easier targeting
Simplified layout - Fewer tracks and controls for smaller screens
No automatic scroll - Prevents scroll conflicts during drag

Implementation

Enable mobile optimization with two props:

// 1. Configure drag sensors with touch delay
const sensors = useDragSensors({ touchOptimized: true });

// 2. Enable larger touch targets on Waveform
<Waveform
  showClipHeaders
  interactiveClips
  touchOptimized  // Enables wider clip boundaries
/>

Audio Credits: "Ubiquitous" by Albert Kader — Minimal Techno stems from the Cambridge Music Technology multitrack library. Licensed under CC BY 4.0.

Sponsors

Moises.ai

Become a sponsor →