A React component to build SVG fretboard diagrams
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.



A React component to build SVG fretboard diagrams

Strings numbering

For the user: strings are numbered starting at 1 and from the lowest pitched to the highest pitched.

Implementation: strings are in an array 0-index.

Frets numbering

Frets are numbered starting at 0 and from the head of the neck towards the bridge.

Fret number 0 is the nut, or the "zero fret" installed close the the nut on certain guitars.

Interval display

Intervals can be displayed in two forms:

  • full interval: 11
  • simplified interval: 4

"P" and "M" are omitted.


  • Display stacked intervals

  • Color schemes

    • colors for intervals
  • Type checking:

    • Flow or TypeScript. Go with Flow if possible.
  • Make sure react-router is not build into the component because it is only used by the sample-app.

  • Allow overriding of the display options per Shape. For example, on the same diagram, one shape could be displayed with notes and another shape could be displayed with intervals.

Never forget:

Optimize Later - Premature optimization is the root of all evil. The most important function of computer code is to communicate the programmer's intent to a human reader. Any coding practice that makes your code harder to understand in the name of performance is a premature optimization.

Apply the Robustness principle - Be liberal in what you accept, and conservative in what you send