Use of the VexFlow API in this tutorial makes some assumptions about pre-requisite comfort with the development of websites in general:

• You know how to connect to files root directories and make new files within that structure
• You have a grasp of usage for common tags in HTML
• You have some experience with CSS
• You understand how to write JavaScript functions
• You have some working knowledge of DOM manipulation

First install the VexFlow library into the root directory of your project. (Best practice is not to install globally, although that is also an option.)

Create an index.html file that includes a standard boilerplate in the root directory of your project. Be sure to include this inside a script tag in the html or layout.hbs file or the VexFlow render will not work.

You will also need a div container for the staff you want to render

Create a style.css file in the root directory of your project. The code below sets the staff size that will render on the page.

.music-render {
    margin: 10px auto;
    padding: 10px;
    background-color: rgba(255, 255, 255, 0.85);
    width: 600px;
    height: 150px;
}
            

Create a music.js file in the root directory of your project. The code below will establish the requisite variables needed to create a new staff.

let vf = new Vex.Flow.Factory({
    renderer: {elementId: 'new-song'}
});
let score = vf.EasyScore();
let system = vf.System();
        

In order to get the program to display single notes in standard notation, you have to program the precise time signature or you will get an error of 'not enough notes to render' OR 'too many backticks' meaning too many beats to render. To get around that, use a simple if/else statement to set the time signature according to the rhythm entered by the user as follows:

function writeNote(pitch, rhythm){
    document.getElementById('score');
// add additional if statements to include more rhythmic options
    if (rhythm === '/8') {
        score.set({time: "1/8"})
    } else if (rhythm === '/q') {
        score.set({time: "1/4"});
    } else if (rhythm === '/h') {
        score.set({time: "1/2"});
    }
    system.addStave({
        voices: [score.voice(score.notes(pitch + rhythm))]
    }).addClef('treble');
    vf.draw();
}
    

Call this function with a input/button to add and display single notes on a staff. (Values inside the function were hardcoded for the purpose of this example.)

Please visit the first version of my dynamic use of this library on Heroku drawMusic v.1 and feel free to submit comments or improvements via an issue in the drawMusic GitHub Repo. You can also view this information at the VexFlow wiki entry and read more about VexFLow at their GitHub Page.