Basic Assumptions

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

Install Dependencies

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.)

$ npm install vexflow
HTML Setup

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.

<script src=""> </script>

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

<div class="music-render" id="new-song"> </div>
CSS Setup

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;
JavaScript Setup

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();
Single Note JavaScript

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){
// 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"});
        voices: [score.voice(score.notes(pitch + rhythm))]

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.)

<input class="button" type="submit" id="score" onclick="writeNote('C4', '/h')" value="Make this note">