VexFlow Sandbox

Experiment with VexFlow

by ronyeh

HTML

<p>
This sandbox uses <a href="https://unpkg.com/browse/vexflow@4.0.1/">version 4.0.1</a> of VexFlow on <a href="https://www.npmjs.com/package/vexflow">npm</a>.
</p>
<p>Take a look at the <a href="https://0xfe.github.io/vexflow/api/">VexFlow API</a>.</p>
<div id="output"></div>

CSS

body {
	font-family: "Helvetica Neue", Arial, sans-serif;
}

div#output svg {
	border: 1px solid gray;
	background: white;
}

JavaScript

import { Vex, Flow, Renderer, Stave } from 'https://cdn.skypack.dev/vexflow@4.0.1';

// Print the build information to the console.
console.log(Vex.Flow.BUILD);

// Look over the VexFlow API:
// https://0xfe.github.io/vexflow/api/

// Explore the API in the developer console:
console.dir(Vex);
console.dir(Flow);

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

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

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

// Add a clef and time signature.
stave.addClef("treble").addTimeSignature("4/4");

// Connect it to the rendering context and draw!
stave.setContext(context).draw();