VexFlow Sandbox

Experiment with VexFlow

HTML

<script src="https://npmcdn.com/vexflow/releases/vexflow-debug.js"></script>
<div id="boo"></div>

Babel + JSX

const VF = Vex.Flow;

// Create an SVG renderer and attach it to the DIV element named "boo".
var vf = new VF.Factory({renderer: {elementId: 'boo', height: 400}});
var score = vf.EasyScore();
var system = vf.System();

system.addStave({
  voices: [
    score.voice(
      score.notes('C#5/q, B4')
        .concat(score.beam(score.notes('A4/8, E4, C4, D4')))
    )
  ]
}).addClef('treble').addTimeSignature('4/4');

system.addStave({
  voices: [
    score.voice(
      score.notes('C#5/q, B4, B4')
        .concat(
        score.tuplet(score.beam(score.notes('A4/8, E4, C4'))))
    )
  ]
}).addClef('treble').addTimeSignature('4/4');

vf.draw();