Library designed for displaying musical notation and guitar chord diagrams on the web. Features a light-weight tree-shakable codebase and 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 12kb
• Features displaying musical information in musical notation and guitar chord diagrams.
• 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