A jQuery plugin for displaying a fretboard that is configurable, interactive, responsive, and stylable. Your fretboard can have any number of strings or frets, and be of any custom tuning. You can display notes programatically or capture user input. The fretboard is made with HTML/CSS/JavaScript.

I am developing features as I need them, but if you have a feature request feel free to contact me.

Check out the demo fretboard (default styles). Here is the same fretboard styled with a dark theme using CSS.

Load your scripts and styles:

<script src="./jquery-1.11.2.min.js"></script>
<script src="./fretboard.js"></script>

<link rel="stylesheet" type="text/css" href="./styles.css">

Create an element to contain the fretboard:

<div class="my-fretboard-js"></div>

Initialize:

$(".my-fretboard-js").fretboard();

This is enough to create a fretboard using the default configuration.

Learn about fretboard configuration and the API.

jQuery plugin (basic, using the default config)

jQuery plugin (using all config options + API)

You can also check out my Guitar Voiceleading Helper, where I use the fretboard to help users create progressions with good voice leading.

Unit tests can be run using the Spec Runner.

If you are using Angular 1, the fretboard is also wrapped as an Angular 1 directive.

If you are using Angular 2, the fretboard is wrapped as an Angular 2 component (in progress).