A JavaScript library for rendering music notation and guitar tablature.

Related tags

Audio vexflow

VexFlow 3

A JavaScript library for rendering music notation. Copyright (c) 2010 Mohit Muthanna Cheppudira

Sponsor this Project

If you use VexFlow in your app, startup, institution, and find it useful, please consider sponsoring its development here: https://github.com/sponsors/0xfe.

Need Help? Ask on the Vexflow Google Group.

What is VexFlow?

VexFlow is an open-source web-based music notation rendering API. It is written completely in JavaScript, and runs right in the browser. VexFlow supports HTML5 Canvas and SVG, and runs on all modern browsers.

Go try out The VexFlow Tutorial to learn how to use VexFlow. Also learn to use the simpler EasyScore API in the Using EasyScore guide.

Quick Start

Using NPM

$ npm install vexflow

Using the HTML script Tag

The releases are served via unpkg.com.

Using EasyScore

The EasyScore API is a quick way to create simple music notation in VexFlow. See running example in this jsfiddle.

import Vex from 'vexflow';

const vf = new Vex.Flow.Factory({
  renderer: {elementId: 'boo', width: 500, height: 200}

const score = vf.EasyScore();
const system = vf.System();

  voices: [
    score.voice(score.notes('C#5/q, B4, A4, G#4', {stem: 'up'})),
    score.voice(score.notes('C#4/h, C#4', {stem: 'down'}))


Learn more about EasyScore at: Using EasyScore.

Using the Native API

The example code below renders a VexFlow stave using SVG. See running example in this jsfiddle.

import Vex from 'vexflow';

const VF = Vex.Flow;

// Create an SVG renderer and attach it to the DIV element named "vf".
const div = document.getElementById("vf")
const renderer = new VF.Renderer(div, VF.Renderer.Backends.SVG);

// Configure the rendering context.
renderer.resize(500, 500);
const context = renderer.getContext();
context.setFont("Arial", 10, "").setBackgroundFillStyle("#eed");

// Create a stave of width 400 at position 10, 40 on the canvas.
const stave = new VF.Stave(10, 40, 400);

// Add a clef and time signature.

// Connect it to the rendering context and draw!


To learn and contribute, check out the VexFlow Wiki.

To build VexFlow from scratch, read the Build Instructions.

Sponsor Vexflow: https://github.com/sponsors/0xfe

MIT License

Copyright (c) Mohit Muthanna Cheppudira 2010
0xFE [email protected] http://www.vexflow.com

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.



  • Add support for all quarter tone accidentals

    Add support for all quarter tone accidentals

    Please consider adding support for quarter tone accidentals.

    These include the Western notation for half-sharp, half-flat, sharp-and-a-half and flat-and-a-half, all of which are explained on https://en.wikipedia.org/wiki/Accidental_%28music%29#Microtonal_notation (and a picture us also available).

    These also include the Iranian notation for half-sharp and half-flat, which are depicted in Persian Wikipedia's pages on sori and koron, respectively.

    Ideally, a different identifier should be used for the western and eastern half-notes, so they can coexist in the same sheet if need be. An example of when this is needed is when sheet music is being written for many instruments (as is used by conductors) some of which are oriental instruments and some western instruments but all can play quarter tones.

    -- UPDATE --

    As shown below, vexflow already supports the Western quarter tone accidentals. There is need for support of Iranian accidentals though.

    feature request 
    opened by Huji 93
  • Use with React / React-native?

    Use with React / React-native?

    Hi there,

    Is it possible to use vexflow with react (react-native) at all? I've used this library before for a phonegap based app but switching to react and would love to keep using this one!

    Cheers david

    question discussion 
    opened by davidfloegel 69
  • Migrate vexflow sources to Typescript

    Migrate vexflow sources to Typescript

    I migrated all the sources to Typescript. Only tests have to be migrated someday as well. I did not migrate the tests, because it would had made the PR even bigger and more complicated to review.

    Tests are all green, but since a huge amount of files were affected would be nice if you could review and find mistakes.

    This is a contribution to the https://github.com/0xfe/vexflow/issues/780 issue.

    • [x] Seamless for existing users. This migration utilises Vex.Flow namespace in index.ts - so it is should be backwards compatible.
    • [x] Use eslint also for ts files
    • [x] Check that there are no existing use cases or workflows that will break by moving to TS.
    • [ ] Review the TS codebase.
    • [x] Check that you can import the typescript classes in javascript without using the minified build.
    opened by wassertim 67
  • 4.0.0


    I'm going to open the discussion as a GitHub issue. When we ship it, we can close this issue and celebrate. :-)

    ~~I started a kanban here.~~ Edit: a trello style project board is probably too much overhead since we only have a few collaborators. I put up a wiki page instead: https://github.com/0xfe/vexflow/wiki/TODOs-for-4.0.0

    Myke started a thread on the vexflow mailing list. We can monitor it for any replies: https://groups.google.com/g/vexflow/c/e61nXKB-dKo

    Please list your "must-haves" and also "nice-to-haves" below. The rest can be punted to version 4.1.0, or version 5.0.0. We can re-organize any items if necessary on the project board: https://github.com/0xfe/vexflow/projects/4

    discussion release 4.0 
    opened by ronyeh 54
  • VexFlow should be able to

    VexFlow should be able to "plug-in" alternate fonts.

    A good start would be the lilypond font or SMUFL.

    This means:

    1. Factoring out direct references to Gonville font indexes (e.g., "v51", "v7b", etc.) and putting them in a separate table (e.g., "closed_head": "v51", "16th_rest": "v8a", etc.).

    2. The table must include all parameters related to the glyphs, e.g., scale, grace_note_scale, x_shift, y_shift, etc, bounding_box, etc.

    3. The Glyph renderer should be able to render different JSON font formats.

    feature request 
    opened by 0xfe 48
  • JoinVoices / Formatter not aligning voices correctly on 3.0.9

    JoinVoices / Formatter not aligning voices correctly on 3.0.9

    Using native code in 1.2.93 I get a correct alignment between the voices image

    However in 3.0.9 I get it worng image

    The code is available in https://jsfiddle.net/zg95n0du/

    opened by rvilarl 43
  • Vexflow Typescript File by File Migration

    Vexflow Typescript File by File Migration

    After @wassertim and @rvilarl had a discussion we propose to migrate to typescript file by file, providing support for js and ts simultaneously.

    First PR will contain infrastructure for ts and eslint.

    And then we will create many PRs with ts files substituting js files.


    opened by wassertim 43
  • `preCalculateMinTotalWidth` is returning a value that is too low on some cases.

    `preCalculateMinTotalWidth` is returning a value that is too low on some cases.

    Yes, preCalculateMinTotalWidth is still wrong, that should be separate issue...

    Originally posted by @0xfe in https://github.com/0xfe/vexflow/issues/839#issuecomment-792349714

    opened by rvilarl 42
  • support component and browserify with minor refactor

    support component and browserify with minor refactor

    And there are also some other cool features besides:

    • managing all dependencie via a manifest (component.json) with semver
      • jquery
      • qunit
      • raphael
    • no more embedding several files into any HTML page
    • vexflow can be installed and be used as a module with component and npm/browserify
    opened by timaschew 39
  • Migration/tuning fraction test

    Migration/tuning fraction test

    Tests for Tuning and Fraction migrated

    opened by rvilarl 39
  • Swap parameter order of addModifier(...)

    Swap parameter order of addModifier(...)

    Most of the work was handled by a regex:

    Search for:
    .addModifier\((\d), (.*)\)([^)]?)$
    Replace with:
    .addModifier($2, $1)$3

    It didn't handle 33 instances (e.g., when there were two calls to .addModifier() chained on a single line, and when there were extra comment characters at the end of the line).

    opened by ronyeh 5
  • Remove instanceof from isCategory() and other places in VexFlow

    Remove instanceof from isCategory() and other places in VexFlow

    This PR continues the discussion of circular dependencies, and refines our work from last summer:

    https://github.com/0xfe/vexflow/issues/1096 https://github.com/0xfe/vexflow/pull/1098

    It also resolves a bunch of circular dependencies, with only two remaining in VexFlow:

    src/formatter.ts -> src/modifiercontext.ts -> src/gracenotegroup.ts -> src/formatter.ts
    src/notesubgroup.ts -> src/formatter.ts -> src/modifiercontext.ts -> src/notesubgroup.ts

    These eight were resolved:

    src/factory.ts -> src/system.ts -> src/factory.ts
    src/accidental.ts -> src/gracenotegroup.ts -> src/beam.ts -> src/tuplet.ts -> src/formatter.ts -> src/modifiercontext.ts -> src/accidental.ts
    src/beam.ts -> src/tuplet.ts -> src/formatter.ts -> src/beam.ts
    src/tuplet.ts -> src/formatter.ts -> src/beam.ts -> src/tuplet.ts
    src/formatter.ts -> src/beam.ts -> src/tuplet.ts -> src/formatter.ts
    src/gracenotegroup.ts -> src/beam.ts -> src/tuplet.ts -> src/formatter.ts -> src/modifiercontext.ts -> src/accidental.ts -> src/gracenotegroup.ts
    src/modifiercontext.ts -> src/accidental.ts -> src/gracenotegroup.ts -> src/beam.ts -> src/tuplet.ts -> src/formatter.ts -> src/modifiercontext.ts
    src/glyph.ts -> src/tables.ts -> src/glyph.ts

    One feature I made use of was "const enums": https://www.typescriptlang.org/docs/handbook/enums.html#const-enums

    TypeScript const enums are sort of like #define in C. All uses of the const enums are erased during compilation.

    I added a Category const enum which contains all the category strings. While coding, we get auto completion because we are typing things like Category.TabNote. However, after compilation, all of these uses are replaced with the primitive string 'TabNote'. I verified this by inspecting the ESM and CJS build output.

    So isCategory() and related typeguard methods like isStemmableNote() now avoid use of instanceof, and rely solely on the Category const enum fields, which are compiled into simple strings.

    opened by ronyeh 2
  • Fix vertical placement of stringnumber and fret number.  For issue #411

    Fix vertical placement of stringnumber and fret number. For issue #411

    This is the last fix for 411. It adds the stringno and fret number. This is what it looks like now. I run the diffs and there are only some minor differences in the stringnumber tests.

    I added some permutations to the formatting test case. I also removed the bracket from the test. There is no way to align that as it stands, because it only has the first and last note in its definitions. Also, it might span multiple measures. So formatting that will have to be the responsibility of the application.


    opened by AaronDavidNewman 3
  • Grace note position is affected by other modifiers / annotations

    Grace note position is affected by other modifiers / annotations

    HI all,

    I'm working on using Vexflow for creating some snare drum etudes. For some reason, the grace note's position changes if the "main" note has a modifier or annotation. This creates a lot of layout mess with snare drum etudes, where accents, grace notes (aka flams) and annotations (aka stickings) are used frequently.

    Is this by design? is there a way to avoid this? (ie have all the grace notes in the same relative position to their "main" notes)

    Check out fiddle: https://jsfiddle.net/b681dk9r/

    Cheers, Nitzan

    opened by nitzanrh 7
  • addModifier parameter order?

    addModifier parameter order?

    Hi @rvilarl @0xfe

    I'm just curious why the order of parameters in Note.addModifier() swapped places recently. I see mention of it in the recent circular dependencies PR, but I don't see how changing the order of the params fixes a circular dependency. Can you help me understand? Thanks!

    The swap happened here: https://github.com/0xfe/vexflow/pull/1279/commits/37a9fdea9a191bb15b444e2b517bae3cfb680c9c#diff-d6198cff69fcf66b5a1c2b4d4f8e2101a5e9c64dc24bae1a904d49abc2ae4f0cR538-R541

    Here is what the method looked like in previous releases: GITHUB:

    • 2020 https://github.com/0xfe/vexflow/blob/5e199870de18cc7f6a8179106395c1564068203e/src/note.js#L342-L348
    • 2016 https://github.com/0xfe/vexflow/blob/6d4a2e4c86f53da804e3fa62a261cf3aaa3fb79b/src/note.js#L251-L257
    • 2014 https://github.com/0xfe/vexflow/blob/dae20fcb99aa0459045aae69a8b5782cc84cd64c/src/note.js#L212-L218


    The current version is: https://github.com/0xfe/vexflow/blob/b404958b192f84d65043f5697ac3c22de2d0d881/src/note.ts#L535

    So as far as I can tell, since version 1.2.0, the modifier was first and the index second.

    I know the comments indicate otherwise, and when I was porting this file I thought it was curious which "legacy" versions of VexFlow had the parameters swapped. I never bothered to check.

    So if it has always been addModifier(modifier, index), according to the old releases, then we should probably stick with it unless there's a great reason to swap now.

    opened by ronyeh 10
  • Issues in tests/flow.html (5,6,7)

    Issues in tests/flow.html (5,6,7)

    5. Rests and Notes overlapping image

    6. Rests overlapping image

    7. Lots of overlapping image

    opened by rvilarl 0
  • 4.0.1


    @0xfe @ronyeh @AaronDavidNewman @mscuthbert @sschmidTU @h-sug1no HappyNew Year! :)

    I would like to start a discussion on when to release a 4.0.1. I would suggest to close #1155 this issue is already quite long. There are mainly two topics that I can think of:

    • beta or release
    • content
    opened by rvilarl 8
  • simplify format function in Stave Note

    simplify format function in Stave Note

    Fixes #1283

    After realising that the code in StaveNote.forma() in #1263 was dead code. I decided to bring it back to life as simple as possible.

    The visual differences (Bravura version) are:

    StaveNote Center_Aligned_Note___Multi_Voice Bravura StaveNote Center_Aligned_Note___Multi_Voice Bravura Current StaveNote Center_Aligned_Note___Multi_Voice Bravura_Current Reference StaveNote Center_Aligned_Note___Multi_Voice Bravura_Reference Three_Voice_Rests Auto_Adjust_Rest_Positions___Three_Voices__2 Bravura Three_Voice_Rests Auto_Adjust_Rest_Positions___Three_Voices__2 Bravura Current Three_Voice_Rests Auto_Adjust_Rest_Positions___Three_Voices__2 Bravura_Current Reference Three_Voice_Rests Auto_Adjust_Rest_Positions___Three_Voices__2 Bravura_Reference Three_Voice_Rests Auto_Adjust_Rest_Positions___Two_Voices Bravura Three_Voice_Rests Auto_Adjust_Rest_Positions___Two_Voices Bravura Current Three_Voice_Rests Auto_Adjust_Rest_Positions___Two_Voices Bravura_Current Reference Three_Voice_Rests Auto_Adjust_Rest_Positions___Two_Voices Bravura_Reference

    opened by rvilarl 5
  • Update developer documentation with new build instructions

    Update developer documentation with new build instructions

    There have been lots of major changes to how VexFlow is built and developed (thanks @ronyeh!), and I'd like to make sure that our core developer documentation is up to date before we make more changes.

    opened by 0xfe 2
  • Issues in tests/flow.html (1, 2, 4)

    Issues in tests/flow.html (1, 2, 4)

    1. Text overlapping notes image

    2. Articulation overlapping beam image

    4. Note heads and beams overlapping image

    opened by rvilarl 1
  • 4.0.1-alpha.0(Jan 23, 2022)

Mohit Cheppudira
i am jack's wasted life
Mohit Cheppudira
Music sheet rendering for iOS

MusicKit MusicKit is an iOS/MacOS X framework for rendering sheet music. It depends on mxml for loading and laying out MusicXML files. Setup After clo

Reinvent Inc. 101 Jan 10, 2022
MuseScore is an open source and free music notation software. For support, contribution, bug reports, visit MuseScore.org. Fork and make pull requests!

Music notation and composition software MuseScore is an open source and free music notation software. For support, contribution, and bug reports visit

MuseScore 6.7k Jan 14, 2022
A language for music notation

Lydown is a language and compiler for creating music scores, parts and snippets. The lydown code is compiled to lilypond code and then compiled to PDF

Sharon Rosner 21 Apr 8, 2021
Typographic Beat-Oriented Notation for music

tbon Typographic Beat-Oriented Notation for music Tbon aims to be the fastest way to enter pitches, rhythms, meter and dynamic levels from a computer

null 11 Jan 23, 2020
Music player and music library manager for Linux, Windows, and macOS

Quod Libet: an audio library, manager & player Quod Libet is a cross-platform audio / music management program. It provides many ways to view your loc

Quod Libet 1.1k Jan 10, 2022
Javascript audio library for the modern web.

Description howler.js is an audio library for the modern web. It defaults to Web Audio API and falls back to HTML5 Audio. This makes working with audi

James Simpson 19.6k Jan 17, 2022
music library manager and MusicBrainz tagger

beets Beets is the media library management system for obsessive music geeks. The purpose of beets is to get your music collection right once and for

beetbox 10.6k Jan 23, 2022
Python library for audio and music analysis

librosa A python package for music and audio analysis. Documentation See https://librosa.org/doc/ for a complete reference manual and introductory tut

librosa 4.9k Jan 15, 2022
C++ library and Python bindings for the Music Encoding Initiative format

LibMEI LibMEI is a C++ library for reading and writing MEI files It is developed by the Distributed Digital Music Archives and Libraries Lab at the Sc

Distributed Digital Music Archives and Libraries Lab 52 Jan 14, 2022
A music composition library for Clojure and Clojurescript.

Leipzig A composition library for Clojure and Clojurescript by @ctford. Use Include it as a dependency in your project.clj, along with Overtone: [over

Chris Ford 431 Dec 2, 2021
Streaming music player that finds free music for you

Desktop music player focused on streaming from free sources Links Official website Mastodon Twitter Support channel (Matrix): #nuclear:matrix.org Disc

null 7.2k Jan 16, 2022
A cross-browser javascript wrapper for the html5 audio tag

audio.js audiojs is a drop-in javascript library that allows HTML5's <audio> tag to be used anywhere. It uses native <audio> where available and falls

Anthony Kolber 2.1k Jan 11, 2022
MusicXML parsing and layout library

mxml mxml is a C++ parser and layout generator for MusicXML files. Usage You will need: CMake >= 2.6 LibXML2 boost (for unit tests) To build a stand-a

Reinvent Inc. 19 Mar 29, 2021
Small, fast and powerful console music player for Unix-like operating systems.

Warning: cmus is not actively maintained. For details, please see #856 cmus — C* Music Player https://cmus.github.io/ Copyright © 2004-2008 Timo Hirvo

C* Music Player 4.5k Jan 16, 2022
🎵 A simple, clean and cross-platform music player

Museeks A simple, clean and cross-platform music player. (museeks.io) Features Museeks aims to be a simple and easy to use music player with a clean U

Pierre de la Martinière 1.1k Jan 10, 2022
Ear-bending noises and music

Cecilia5 - the audio processing toolbox Cecilia is an audio signal processing environment. Cecilia lets you create your own GUI (grapher, sliders, tog

Olivier Bélanger 130 Dec 29, 2021
Compose music and write score easily in your browser!

inknote Compose music easily in your browser! http://www.michalpaszkiewicz.co.uk/inknote/ Store multiple files, tag them with colours. Made using Type

Michal Paszkiewicz 148 Jan 20, 2022
:tangerine: Clementine Music Player

Clementine Clementine is a modern music player and library organizer for Windows, Linux and macOS. Latest Release Latest Pre-Releases Website: http://

Clementine 3.1k Jan 2, 2022