vexflow.esm.js

This page loads the vexflow.js ESM build, which bundles the Bravura, Petaluma, and Gonville music fonts. ESM builds are not minified. You can use a bundler to minify the code for production use, or you can import from a CDN that does minification, like https://www.skypack.dev/.

Click here to view the vexflow.js file.

Open the developer console and explore the VexFlow object. Below are some things you can try:

Get an object with the build information of the VexFlow library.

VexFlow.BUILD

Get the default font stack, as an array of strings.

VexFlow.getFonts()

Draw a stave with a treble clef, time signature, and a few notes.

const factory = new VexFlow.Factory({
  renderer: { elementId: 'output', width: 300, height: 180 },
  });
  
const score = factory.EasyScore();
const system = factory.System();
  
system
  .addStave({
  voices: [
    score.voice(score.notes('C#5/q, B4, A4, G#4', { stem: 'up' })),
    score.voice(score.notes('C#4/h, C#4', { stem: 'down' })),
  ],
  })
  .addClef('treble')
  .addTimeSignature('4/4');
  
factory.draw();