VexTab: writing guitar tablature that a browser can render

Writeability as the design goal

VexTab is a language that lets you create, edit and share music notation and guitar tablature, and the README puts the differentiator in a single comparison. ASCII tab, it says, is designed for readability, while VexTab is designed for writeability. That distinction is the reason the project exists. A tab that is pleasant to read on a forum is awkward to write, and a format you can write easily is unpleasant to read, so VexTab chooses the writing side, which is what you need if you are generating notation from data or letting a person type it. The language covers both notation and tablature in the same document, with a tabstave line carrying options such as notation, key and time, and then notes and text lines. The tutorial is linked for trying it out, and the author also points at My Vexflow as a place to save and share a VexTab document.

Auto-render turns a div into notation

The fastest integration path is a script tag and a div. You include `dist/div.prod.js` into your HTML document with a script tag, and the contents of every `div` element with the class `vextab-auto` are parsed as VexTab and rendered in place as music notation. The example in the documentation shows the whole shape, with the notation source sitting inside the div alongside the display attributes:

<div class="vextab-auto"
    width=680 scale=1.0 editor="true"
    editor-width=680 editor-height=330>
    options space=20
    tabstave notation=true key=A time=4/4

    notes :q =|: (5/2.5/3.7/4) :8 7-5h6/3 ^3^ 5h6-7/5 ^3^ :q 7V/4 |
    notes :8 t12p7/4 s5s3/4 :8 3s:16:5-7/5 :h p5/4
    text :w, |#segno, ,|, :hd, , #tr

    options space=25
</div>

Several div attributes are documented. The `editor` attribute takes `true` or `false` and enables or disables the live editor, with `false` as the default, which is a nice touch because the editing UI is opt-in rather than something you have to hide. The `scale` attribute runs from 0.5 to 3.0 as the rendering scale factor, defaulting to 1.0. And `editor-width` and `editor-height` set the editor dimensions in pixels. So the entire declarative surface for a page of notation is a class name and a handful of attributes.

The parser, the artist and the Vex namespace

The bundles expose four things on a global `vextab` object, and the division of labour mirrors the architecture. `vextab.Div` is the TabDiv class that implements the auto-render behaviour for div elements. `vextab.VexTab` is the parser. `vextab.Artist` is the renderer. And `vextab.Vex` is the Vex namespace from the VexFlow library itself. If you want to do more than the auto-render path, you use the API directly, and the package is on npm:

$ npm install vextab

The basic usage example creates a VexFlow renderer over a canvas element, then an Artist and a VexTab parser, parses a tabstave and renders it, with the parse and render wrapped in a try and catch so a syntax error in the notation is reported rather than thrown out of the page. The renderer is created with `Renderer.Backends.SVG`, which is worth noting since the choice of backend changes how the output is embedded. The documentation also points at `tests/playground.ts` as a working example of the API in use, which is the fastest way to see a fuller integration than the basic usage example.

The rewrite and the three dependencies behind it

This version of VexTab is a rewrite, and the documentation names the three key dependencies. TypeScript provides the strongly typed source for the parser and renderer, which is the reason the API in the example reads as it does. Jison provides an LALR(1) parser modelled on Bison, and that is the actual grammar of the VexTab language, which is why the notation syntax is regular and why a syntax error is a parse error rather than a runtime surprise. VexFlow handles the music engraving and rendering, so the quality of the output is VexFlow's quality and not this project's. Separately, the audio player feature needs MIDI.js, a soundfont renderer for the web, plus soundfonts for various instruments, which you have to obtain yourself. The bundles also include bundled versions of zepto and VexFlow along with a small internal utility helper, and the provided `dist/div.dev.js` is unminified while `dist/div.prod.js` is minified.

Building, testing and publishing

The developer workflow is a clone plus two commands:

$ npm install
$ npm start

The build itself is driven by Grunt, and with the `grunt-cli` package installed you can run the individual steps, which the documentation lists as `grunt (lint|build|publish)`, along with a note that you may have to run `npm publish` manually if npm.org blocks you. The test server is a Grunt and QUnit setup, since `grunt-contrib-qunit` and `qunit` are both in the dev dependencies, and you browse to `http://localhost:9005` to run the tests. The contribution instructions are unusually specific about visual verification: before sending a pull request you are asked to make sure the tests pass a visual inspection, open `http://localhost:9005` in a browser and verify that the notation examples at the bottom of the page render correctly, and also open `http://localhost:9005/playground.html` to check that the change works. New tests are required for anything you work on, and pull requests without tests are declined. For working against a local VexFlow checkout, the documentation describes cloning that repository, running `npm link` there and then `npm link vexflow` in the vextab directory.

The licence is the real constraint

The licence needs reading carefully, because it is not a standard open source licence. The README states that VexTab is an open specification and that the reference implementation, this repository, is open source, freely available complete and uncrippled for non-commercial use. For commercial websites, products, blogs, plugins or tools, you are asked to get in touch with the author, with the note that the author is very reasonable. The copyright is held by Mohit Muthanna Cheppudira for 2012, and the software is provided as is, without warranty of any kind, express or implied, with the copyright notice to be included in all copies or substantial portions. The project metadata records the licence as a custom one that GitHub cannot classify, and the package.json carries the same unusual identifier. The underlying library, VexFlow, is a different matter: it is completely open source under the MIT licence. So a commercial user faces a split, where the rendering engine is free to use and the language layer on top of it needs a conversation.

Where this is the wrong choice

Three limits are clear from the documentation itself. The first is the commercial licence, which for a company building a product is a blocker that has to be resolved before any other work. The second is the age of the code relative to its dependency. The last push was on 2026-04-15, the repository publishes no GitHub releases, and the version in package.json is 4.0.4, while the declared dependency is `vexflow` at 5.0 or later. The README also still refers to a Grunt based build with `grunt-cli` and a `Gruntfile.js` in the top level, alongside a webpack configuration, an ESLint flat config and a TypeScript config, so the toolchain has been part way through a modernisation that is not obviously finished. The third is scope. VexTab does notation and tablature, and the audio feature is optional and depends on assets you have to find yourself. If what you want is a full notation editor with selection, undo and export, a library for embedding rendered notation in a page is the wrong shape of tool.

Editorial conclusion

VexTab suits a web project that needs notation to appear in a page without shipping a notation editor, and the auto-render mode makes the integration close to a single script tag and a div. It is the wrong choice for a commercial product, because the licence limits the reference implementation to non-commercial use unless you contact the author, and it is the wrong choice if you need the audio playback feature, which depends on MIDI.js and soundfonts that you have to supply. Before you build on it, confirm the licence terms for your use case, and check the version of VexFlow you depend on, since the package declares vexflow at 5.0 or later. The last push was on 2026-04-15, the repository publishes no GitHub releases, and the version in package.json is 4.0.4.

Frequently asked questions

Official sources

1. 0xfe/vextab on GitHub
2. Issues
3. README