architecture demo
Rhythm, then melody, then a chord.
OSMD draws the MusicXML reference. VexFlow draws the live builders. Harmony is just a symbol — no staff.
01 · reference
Loaded from MusicXML
Read-only existing document. This panel is unrelated to the builders below — it only shows the OSMD side of the package.
02 · rhythm
Preset durations, single line
Beams are built before notes are drawn so flags disappear. Triplets beam and bracket their own group of three.
03 · melody
Pitches on the rhythm skeleton
Durations stay locked to the rhythm panel. The highlighted note is the cursor — pick a pitch to fill and advance, or step with the arrows.
Build a rhythm above first — melody slots come from it.
04 · harmony
Chord builder
Sharp and flat spellings are the same pitch class. Click a selected root or quality again to clear it.
Chord: —