JSFiddle - React, Tailwind, and code Playground

by hokuma

HTML

<script src="https://rawgit.com/0xfe/vexflow/master/releases/vexflow-debug.js"></script>
<div id='score'></div>
<input type='key' id='key' type='text' />

Babel + JSX

const VF = Vex.Flow;

const div = document.getElementById('score');
const keySelector = document.getElementById('key');
const renderer = new VF.Renderer(div, VF.Renderer.Backends.SVG);

renderer.resize(140, 120);
const context = renderer.getContext();
context.setFont('Arial', 10, '').setBackgroundFillStyle('#eed');

const stave = new VF.Stave(10, 10, 100);
stave.addClef("treble");
stave.setContext(context).draw();

const CHORDS = {
	'C': new VF.StaveNote({keys: ['c/4', 'e/4', 'g/4'], duration: '1'}),
  'D': new VF.StaveNote({keys: ['d/4', 'f/4', 'a/4'], duration: '1'}),
};

keySelector.addEventListener('change', (e) => {
	const notes = [CHORDS[e.target.value]];
  const voice = new VF.Voice({num_beats: 4, beat_value: 4})
	voice.addTickables(notes);
	const formatter = new VF.Formatter().joinVoices([voice]).format([voice], 50);
	voice.draw(context, stave);
});