5. Timeline Editor

The timeline editor appears when a song is loaded. The toolbar above the timeline shows the first tempo and time signature, along with editing controls.

The timeline displays a bar/beat grid with multiple lanes:

Ruler — bar numbers and beat ticks at the top (CSS gradient rendering for performance)
Tempo Lane — diamond markers showing BPM changes with colored span blocks indicating section duration; click to add, click a marker to edit
Time Signature Lane — markers for time signature changes (e.g. 4/4, 6/8) with colored section spans
Region Lane — drag to create colored song sections (Intro, Verse, Chorus, etc.)
Audio Lane — imported audio clips with waveform display
MIDI Lane — MIDI event pills with automatic vertical stacking when events overlap at the same position

Use Ctrl+Scroll (or Cmd+Scroll on macOS) to zoom the timeline. A thin progress bar appears at the bottom of the toolbar during zoom transitions. The snap selector in the toolbar controls grid alignment (Bar, Beat, 1/2, 1/4, 1/8, Off). When snap is set to Off, items can be placed at fractional beat positions for precise free placement.