September 23, 2018

Earlier this year, I was studying chord patterns and wrote them into a document. This was a PITA to update, so I made a web app out of it. I took this opportunity to learn some tech, so I jumped on the Vue bandwagon. I found that the Vue CLI tools didn’t get in my way, and the Vue documentation made for a gentle learning curve.

yep yep yep

Tools used

  • VueJS as the main framework


With this project, I needed to figure out two things, and all the hard stuff was finished in one afternoon:

  1. Data format for the chord diagrams. I laid it out in a few JSON files here.
  2. Vue component scheme. I settled for four components here:

    • ChordGroup
    • FretboardDiagram
    • FretboardMarker
    • PatternGroup

For someone already familiar with web dev frameworks and the Node stack, the view from Vue is majestic.

yep yep yep


yep yep yep

Take a look at
For more info, check out the project repository at

I’m happy with this project! I still use it from time to time when I want to play around with chord voicings.

Back to Code.

RJ Salvador

RJ devs and plays tunes in Toronto. Tweet at him if you like, or check him out on Instagram.