Vector Score

TS Package

Typescript

Vite

Library designed for musical notation in a lightweight bundle along with a simple to use API.

More about this project

Doesn't rely on outside fonts, uses built in svg glyphs for creating clefs, notes, accidentals, etc.

Very lightweight, gzipped bundle size is only 9kb

Uses efficient means of writing to the DOM, such as creating fragments to batch draw to the DOM. Uses <defs> to define a set of svg paths that the MusicStaff instance will rely on instead of drawing a new path to the DOM for each instance of a glyph

Utilizes encapsulation to only expose public methods for interfacing with a instanced MusicStaff or Rhythm Staff

Additonal Links

NPM Package: https://www.npmjs.com/package/vector-score

Used Resources

Bravura Font: https://github.com/steinbergmedia/bravura

Vexflow for Reference: https://github.com/0xfe/vexflow