Skip to content
learn
Global menu

VexTab & VexFlow — Mission

Why I’m learning this

Section titled “Why I’m learning this”

Guitar Alchemist (GA) shows guitar voicings, and a voicing is easier to read as tablature than as x-3-2-0-1-0. GA’s chatbot is asked to attach a fenced vextab block to every fingering it mentions; GA has a VexTab grammar in EBNF, a parser and a generator in F#, a React viewer, and end-to-end tests that expect an SVG. I wanted to know what VexTab is, what it can and cannot write, and whether the pieces of GA that speak it agree with the real thing. Lesson 4 answers the last question with measurements, and the answer is mostly no.

Who this course is for

Section titled “Who this course is for”

You write C# or Java. You know the JavaScript of JavaScript for C#/Java developers: modules, npm, functions, objects. A little React helps for the second batch. You can read a guitar tab: six lines, one per string, numbers for frets. The music theory the lessons need, note names, octaves, key signatures, is recalled where it appears, with links to Music theory for Guitar Alchemist.

VexTab and VexFlow in one table

Section titled “VexTab and VexFlow in one table”
What it is The nearest thing you know
VexFlow A JavaScript library that draws music notation and tablature, in SVG or on a canvas: staves, notes, beams, ties, bends, text A drawing API with a layout engine, like WPF’s DrawingContext plus a formatter
VexTab A small text language for notation and tab, and the JavaScript that parses it and calls VexFlow A DSL compiled to calls on an object API, like a Razor template compiled to C#
tabstave, notes, text, options The four kinds of VexTab line Statements of the DSL
The Artist VexTab’s object that turns parsed lines into VexFlow staves and notes The code generator of a compiler

By the end of this course, I will be able to

Section titled “By the end of this course, I will be able to”
  • write VexTab for melodies, chords and guitar techniques, and read the errors it raises;
  • set keys, times, clefs and tunings, and know which of them change the notation and which only the tab;
  • render VexTab to SVG under Node, without a browser, and test the output;
  • say what VexTab cannot express, and when to drop to VexFlow;
  • check a program that writes VexTab, a chatbot or a generator, against the real parser;
  • (second batch) draw the same music with VexFlow’s own objects, render it in React without redrawing on every token, and plan a move from VexFlow 4 to 5.

Outline

Section titled “Outline”
# Lesson You already know
1 First stave, first tab a DSL compiled to an API, a parse tree, System.Xml.Linq
2 Guitar techniques the tab you read: bends, slides, hammer-ons, chords
3 Keys, times, clefs and tunings key signatures, capos, drop D
4 Case study: GA’s chatbot writes VexTab FParsec or a parser combinator library, LLM prompts
5 Second batch. Stave, StaveNote, Voice, Formatter: what VexTab hides, and a strict voice that counts beats object construction, a layout pass
6 Second batch. TabStave and TabNote; keeping notation and tab in step two views of one model
7 Second batch. Rendering in React without redrawing on every streamed token, and testing it with Playwright (GA’s MemoizedVexTab) memo, effects, end-to-end tests
8 Second batch. Moving GA’s components from VexFlow 4 to 5: what changed in the API, fonts and text measurement a major-version upgrade
— Journal

Resources

Section titled “Resources”