VexFlow Repository Has Moved >>>

[ronyeh]

The repository you are looking at contains VexFlow 4.x.

This is a stable LTS version and is maintained by @rvilarl and @ronyeh and others.

The VexFlow 4.x package is published on NPM at https://www.npmjs.com/package/vexflow4

---

The newest version of VexFlow (V5) is here:

https://github.com/vexflow/vexflow/

V5 has been published on NPM at https://www.npmjs.com/package/vexflow

[YellowOnion]

if you grab a unversioned vexflow library off jsdilvr it returns a v5 beta that seems to be broken. I was expecting to grab a v4 library, but not exactly sure what you guys intended to happen.

Edit:
Okay I figured out what the issue is, the documentation hasn't been updated to point to the new repo.

this is wrong: https://cdn.jsdelivr.net/npm/vexflow/build/cjs/vexflow.js
this is correct: https://cdn.jsdelivr.net/npm/vexflow4/build/cjs/vexflow.js

[rvilarl]

this is wrong: https://cdn.jsdelivr.net/npm/vexflow/build/cjs/vexflow.js

This should be the 5.0.0 release not a beta. @YellowOnion what is broken?

[YellowOnion]

It was complaining about my DIV not being a DIV

Was trying to port from v4 and got stuck with this: const renderer = new Renderer(div, Renderer.Backends.SVG); failing to work.

I've since gone back to v4, I think it's more important to just get the documentation updated, all of the docs point to the v5 repo.

[rvilarl]

Can you provide a jsfiddle?

[ronyeh]

Hello @YellowOnion !

Thanks for the feedback.

If you want to stick with V4 for now, you are correct. The JS URL has been changed to include the number 4 (vexflow => vexflow4):

This is the correct URL for your script tag:
https://cdn.jsdelivr.net/npm/vexflow4/build/cjs/vexflow.js

In general, it can be risky if you have a production app that points straight to a CDN JS url without a specified version number. The URL path might look different depending on your favorite CDN, but in general there is an @ sign with a version number after it.

GOOD examples:
https://cdn.jsdelivr.net/npm/vexflow@4.2.5/build/cjs/vexflow.js
https://cdn.jsdelivr.net/npm/vexflow@5.0.0/build/cjs/vexflow.js

When we bump the major revision number, we try our best to keep most of the API compatible. But in the interest of moving forward and improving things, there are usually API changes between major revisions.

We just published 5.0.0, and are in the process of documenting it right now.

Here is a Hello World example that includes the V5.0.0 JS library from a CDN:
https://jsfiddle.net/ronyeh/9w7nL56q/7/

If you happen to look at the hello world example on vexflow.com, the JS code displayed there won't work! (We plan to update that webpage... :-)

In V5, we changed the namespace so that the library doesn't export a Vex object which contains a Flow object. Instead, it just exports a VexFlow object.

So the only change we need to make to that Hello World example is to remove the dot from Vex.Flow.

const { Factory } = Vex.Flow; // older version

becomes

const { Factory } = VexFlow; // version >= 5.0.0

Good luck!

If you plan to stick with V4, that's totally fine. Feel free to report bugs in this repository. We'll try to monitor it and patch accordingly.

If you want to try out V5, you're welcome to come join us over at:

https://github.com/vexflow/vexflow

Thanks!

[YellowOnion]

I'm just using vexflow for an anki deck, with a local copy, and was following the instructions to update without realizing there was a version 5 and none of the documentation mentioning the changes lol.

This is my current code, I made minimal changes and it started to fail, for now I'll stick with v4.

Edit: I just found a bug for card type 2 where I don't actually have the output div, somehow missed it because it was working fine visually, so yeah totally my fault haha.

Here's a preview of my cards if you're interested, thanks for the amazing library.

card type 3:

card type 4: