See the full app here!

Around early 2018, I started compiling guitar chord diagrams as I studied different chord patterns and inversions. That turned into a huge Visio document, which was a pain in the ass to update. I figured that putting it on the web would be a much cooler idea.

This was also a neat opportunity to learn some tech stuff, so I decided to jump on the Vue bandwagon for this one. That turned out to be a great decision. I found that the Vue CLI tools didn’t get in my way at all, and the Vue documentation made for an gentle learning curve for a React dev.

With this project, I just 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

If you’re already familiar with web dev frameworks and the Node stack, the view from Vue is majestic.

For more info, check out the project repository at