A JavaScript library for rendering music notation and guitar tablature.
A JavaScript library for rendering music notation and guitar tablature.
[email protected]. Specifying a particular version is good practice, to prevent rare issues with a future update breaking your deployment. During development & testing, feel free to use the latest release by omitting the version number: https://cdn.jsdelivr.net/npm/vexflow/build/cjs/vexflow.js
If your project uses a bundler, you can install VexFlow from npm:
```sh
npm install vexflow
```
Read our detailed guide on [integrating with VexFlow.](https://github.com/0xfe/vexflow/wiki/VexFlow-4-Tutorial)
## EasyScore
EasyScore is VexFlow's high-level API for creating music notation. On a web page containing a `
`, the following code displays a score:
```javascript
const { Factory, EasyScore, System } = Vex.Flow;
const vf = new Factory({
renderer: { elementId: 'output', width: 500, height: 200 },
});
const score = vf.EasyScore();
const system = vf.System();
system
.addStave({
voices: [
score.voice(score.notes('C#5/q, B4, A4, G#4', { stem: 'up' })),
score.voice(score.notes('C#4/h, C#4', { stem: 'down' })),
],
})
.addClef('treble')
.addTimeSignature('4/4');
vf.draw();
```
[See a running example of EasyScore here.](https://jsfiddle.net/xure9svb/)
[Learn more about EasyScore here.](https://github.com/0xfe/vexflow/wiki/Using-EasyScore)
## Native API
If you need more control, you can use the low-level VexFlow API. Below, we render a stave using SVG. [See a running example of the low-level API here.](https://jsfiddle.net/5zgf03un/)
```
…
```
## Examples
- Take a look at [the VexFlow tutorial](https://github.com/0xfe/vexflow/wiki/Tutorial).
- Dig into [the unit tests](https://github.com/0xfe/vexflow/tree/master/tests).
## More Resources
- If you need help, come join us on the [Vexflow Google Group](https://groups.google.com/forum/?fromgroups#!forum/vexflow).
- Learn more on the [VexFlow wiki](https://github.com/0xfe/vexflow/wiki).
- Build VexFlow from scratch by following the [build instructions](https://github.com/0xfe/vexflow/wiki/Build%2C-Test%2C-Release).
- [VexFlow](https://vexflow.com) was created by [Mohit Muthanna Cheppudira](https://muthanna.com) in 2010. Since then, many have contributed with code, documentation, bug reports, and feature requests. See the [list of contributors to the repository](https://github.com/0xfe/vexflow/graphs/contributors).
- [Projects Using VexFlow](https://github.com/0xfe/vexflow/wiki/Project-Gallery)
## Sponsor this Project
If you find VexFlow useful, please consider sponsoring its development: https://github.com/sponsors/0xfe.
# MIT License
Copyright (c) Mohit Muthanna Cheppudira 2010 No open issues yet, or sync has not completed.