JSFiddle - React, Tailwind, and code Playground

by Melnikov_Sergey

HTML

<script src="https://unpkg.com/vexflow/releases/vexflow-min.js"></script>
<div id="music-notebook"></div>

JavaScript

VF = Vex.Flow;

var element = document.getElementById("music-notebook");
var renderer = new VF.Renderer(element, VF.Renderer.Backends.SVG);

renderer.resize(500, 200);

var context = renderer.getContext();

var stave = new VF.Stave(10, 50, 400);

stave.addClef("treble").addTimeSignature("4/4");

stave.setContext(context).draw();

var notes = [
    new VF.StaveNote({keys: ["e##/5"], duration: "8d" }).
      addAccidental(0, new VF.Accidental("##")).addDotToAll(),

    new VF.StaveNote({keys: ["eb/5"], duration: "16" }).
      addAccidental(0, new VF.Accidental("b")),

    new VF.StaveNote({keys: ["d/5", "eb/4"], duration: "h" }).
    	addDot(0),

    new VF.StaveNote({keys: ["c/5", "eb/5", "g#/5"], duration: "q" }).
      addAccidental(1, new VF.Accidental("b")).
      addAccidental(2, new VF.Accidental("#")).addDotToAll()
  ];

VF.Formatter.FormatAndDraw(context, stave, notes);