Dynamic use of the verovio javascript toolkit to update the notation display of editable Humdrum data on the page.

The page describes how to generate dynamic notation from Humdrum data that you edit on a web pages. The setup for the Humdrum editing box is a bit compilicated, so this page still has to be written.

In the meantime you can observe how it is setup in the Jekyll static-site generating system for use in the VHV documentation. Start with the source code for this page. Also see the source code for the verovio figure template, and the source code for the JavaScript support functions.

Example

Try editing the Humdrum data in the box below. The notation should update as you change it.

load into VHV

Display of the Humdrum data is optional, but then the notation is not editable: