vexflow: HTML5, Canvas, JavaScript library for music and guitar tablature

In Episode 0.3.4, Zed Shaw and I talked about the sad state of guitar tab sites, and he mentioned VexFlow as a project to watch. VexFlow is a set of open source projects from Mohit Muthanna that use HTML5, <canvas>, and SVG to render embeddable guitar tabs and music in blog posts or web pages.


Instead of using the ubiquitous (yet extremely free-form) ASCII tabs with which most guitarists are familiar, VexFlow introduces its own tablature and music markup language:

VexTab is a language that allows you to easily create, edit, and share guitar tablature. Unlike ASCII tab, which is designed for readability, VexTab is designed for writeability.

VexTab is easy to write

notes 0/4 14/3 13/1 14/3 0/4 12/3 12/1 12/3 | 
notes 0/4 10/3 10/1 10/3 0/4 9/3 8/1 9/3

notes 0/4 5/3 5/1 5/3 0/4 4/3 3/1 4/3 |
notes (3/1.4/3)s(1/1.2/3) 

notes 0/5 0/5 3b4/5 0/4 3b4/4 0/4 |
notes 2/3 0/1 3/2 2/3 0/1 3/2 2/3

This intro to Dead or Alive in VexTab can be beautifully rendered into guitar tablature using TabDiv, VexFlow’s HTML5/JavaScript/<canvas>/SVG embedding library.

Rendered tablature

VexFlow also supports clef-based music notation as well.

tabstave notation=true
notes :8 [ 5s7/5 ] :q (5/2.6/3)h(7/3) [ :8 6/4 :16 7p5/5 ]


Rendered music

For browsers without <canvas> support, TabDiv supports SVG with the help of RaphaëlJS from Dmitry Baranovskiy.

You can try your hand at writing VexTab in your browser with Mohit’s awesome tutorial.

[Source on GitHub] [Homepage] [Tutorial]

News Films

Our little film studio focuses on telling developer-centric stories that need to be seen.

Beyond Code: Season 3 / GopherCon 2015

0:00 / 0:00