Thursday, March 24, 2011

The VexFlow Tutorial (...and other goodies)

Finally... finally... finally... we have the humble beginnings of what could be considered "documentation".

I present to you The VexFlow Tutorial.

Although still in its infancy, the tutorial covers everything you need to start using VexFlow in your own code. My plan for the next few weeks is to make this document as comprehensive as possible, and write up a separate API reference.

I hope that this tutorial will help developers understand VexFlow better, and enable them to build new and interesting libraries, parsers, and applications.

The entire tutorial is stored in the Git repo; feel free to send me your corrections or other updates.

About time, I know.

In other news, we have had a few contributions to both VexFlow and VexTab. A big thanks to airfrog, wiseleyb, and adamf for getting these done.

First, we have the ability to render dotted notes.

Dotted Notes

Then we have key signatures.

Key Signatures

We also have time signatures.

Time Signatures

This includes the really crazy time signatures too.

Whacky Time Signatures

Finally, we have support for different types of clefs.

Alternate Clefs

But wait... there's more. All of this is supported in VexTab by way of new tabstave parameters. Take a look at the updated VexTab Tutorial for the details.


  1. Nice work!

    One bug: There is no HTML doctype declared on the VexFlow tutorial page (, so IE9 renders it in Quirks mode by default and therefore none of the HTML5 Canvas elements show up. You should add the following to the very first line of the page:

  2. i want to develop a music composition app (visual is the idea, but textual as a start) in HTML5 and javascript. your vexflow and vextab are maybe the only candidates for much of the work. however i need to modify them to handle actual notes instead of fret notes
    my e-mail is

  3. Could you kindly inform us how about the format that is contained in the font .js files? (gonville_all.js for example.) I'd like to change some of the shapes that are in the glyphs, but I don't know where to start. What I have are some .gif files to convert into whatever format that is. Thank you!

  4. Never mind about the dumb fonts question I asked (anonymously)! I have read the source code now so am somewhat less clueless! thank you!

  5. This project is sweet - I will be putting together an application using it this weekend and will send a link over when it's complete.