jsDelivr vexflow demo

HTML

<body>
  <h1>VexFlow Hello World</h1>
  <div id="output"></div>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/build/cjs/vexflow.js"></script>
  <script>
    const { Factory, EasyScore, System } = VexFlow

    const factory = new Factory({
      renderer: {
        elementId: "output",
        width: 500,
        height: 200,
      },
    })

    const score = factory.EasyScore()
    const system = factory.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")

    factory.draw()
  </script>
</body>

CSS

body {
  font-family: sans-serif;
  margin: 30px;
}

#output {
  border: 1px solid pink;
}