header icon

RJ Salvador

Software Engineer
and AEC nerd

guitarragrams v1

project//September 23, 2018

Main page sketch

Main page result

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.

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


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

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