VexFlow renders music notation to Canvas, SVG, or WebGL. It powers notation editors, education apps, and real-time visualisers

// draw a single quarter-note middle-C
import { Renderer, Stave, StaveNote, Formatter, Voice } from "vexflow";
const div = document.getElementById("score");
const renderer  = new Renderer(div, Renderer.Backends.SVG);
const context   = renderer.getContext();
const stave     = new Stave(10, 40, 250).addClef("treble").setContext(context).draw();
const notes     = [ new StaveNote({ keys: ["c/4"], duration: "q" }) ];
new Formatter().joinVoices([new Voice({num_beats:1,beat_value:4}).addTickables(notes)]).formatToStave(notes, stave);

1. NPM / PNPM / Yarn

   npm i vexflow             # current stable (4.2.x)
   npm i vexflow@next        # dev build (5.x branch)

2. ESM / TS Import

   import { Renderer, Stave } from "vexflow";

3. CDN (UNPKG)

   <script src="https://unpkg.com/vexflow@4.2.5/build/cjs/vexflow-min.js"></script>

👉 The global object is Vex when using the classic UMD build.

3.1 Renderer

Manages the drawing backend (SVG, Canvas, or WebGL) and produces a graphics context.

3.2 Stave

Defines a staff system: clef, key-signature, time-signature, barlines, tempo text.

3.3 Notation Nodes

StaveNote, TabNote, Articulation, Accidental, ClefNote — each inherits from Tickable and owns glyph metrics.

3.4 Voice

Groups notes that share rhythmic context, enforcing complete beats per bar.

3.5 Formatter

Calculates horizontal spacing, collision-avoidance, and justifies voices across a stave.

1. Accidentals — call addAccidental(index,new Accidental("#")); be sure to add before formatting.

2. Beams — group notes via new Beam(notes), then render after voices are formatted.

3. Ties & Slurs — StaveTie handles tied durations; Curve draws slurs between arbitrary tickables.

4. Tuplets — pass grouped notes to new Tuplet(notes, options).

5. EasyScore API — for quick demos: factory.EasyScore().voice(score.parse("C#5/q, D5, E5, F5")) renders with one-liner simplicity.

A TabStave lines-up with a regular stave via System helper. Use ModifierContext to share beams or Bend/ Vibrato glyphs between note types.

// highlight note under cursor
renderer.getContext().svg.addEventListener("mousemove", e=>{
  const { offsetX:x, offsetY:y } = e;
  notes.forEach(n=> n.setStyle({ fill: n.containsPoint(x,y) ? "#ffa500" : "#000" }));
  renderer.draw();                 // re-paint SVG
});

SVG backend allows DOM-level hit-testing; Canvas needs client-side mapping.

1. Batch glyph generation with a Factory singleton; re-use Glyph objects across redraws.

2. Turn off debug bounding-boxes (Vex.Flow.DEBUG = false) in production.

3. Prefer the SVG backend for frequent layout edits; switch to Canvas for static high-volume scores.

Version	Feature	Notes
4.2	TypeScript Rewrite	Typed definitions ship with package; better intellisense
4.2	Factory.System	Simpler multi-stave layout helper.
4.1	EasyScore grace-notes	/grace syntax for quick embellishments.
5.0-beta	WebGL Renderer	GPU-accelerated vector glyphs; orders-of-magnitude faster when animating scores.
5.0-beta	Variable-width beams	Auto-taper based on stem direction.

1. Official Site & Examples

2. GitHub Repository (issues, discussions, nightly builds)

3. VexFlow Examples Repo for ready-made code snippets