Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

Fretboards on a browser

Instantiate a fretboard, and display some notes, scales, chord voicings, etc.

This is an example of how it looks like:

A live demo is available at


As a script tag, from CDN:

<script src=""></script>

In a modern Javascript environment, with ES2015 or higher, install with:

npm install fretboards

And then import the whole package:

import * as fretboards from "fretboards";

...or just the bits you need:

import { Fretboard, Tunings } from "fretboards";

Usage examples

The javascript API:

// Layout a specific scale
var fb = fretboard.Fretboard();
fb.add("a phrygian").paint();

// Use alternative tunings
var fbDropD = fretboard.Fretboard({ tuning: fretboard.Tunings.guitar6.Drop_D });
fbDropD.add("a phrygian").paint();

// Place specific notes on specific strings, e.g. for chord voicings
var c7add9 = fretboard.Fretboard({ frets: 5 });
c7add9.add("5:c3 4:e3 3:bb3 2:d4 1:g4").paint();

Property updates

Once the fretboard is rendered, you can dynamically update configuration properties and the fretboard will redraw, keeping the notes. Examples include:

fb.set("fretWidth", 30);
fb.set("leftHanded", true);
fb.set("frets", 12);

Check the full example at demos/dynamic.html.

The 'document' API

You can also use HTML attributes for declaratively including fretboard instances in your page, and using Fretboard.drawAll(selector) as in the example below:

  data-notes="6:g2 6:f#2 6:a2 5:b2 5:c3 5:d3 4:e3 4:f#3; 4:g3 3:a3 3:b3 3:c4 2:d4 2:e4 2:f#4; 1:g4 1:a4 1:b4"
<div class="fb-container" data-frets="12" data-notes="c major"></div>

<!-- bootstrapping javascript at the end -->

You can pass initialization configuration options to drawAll, e.g.:

  fretboard.Fretboard.drawAll(".fb-container", {
    tuning: Tunings.guitar6.E_4ths,
    leftHanded: true,

Configuration options

These are the configuration options and their default values:

config = {
  frets: 12, // Number of frets to display
  startFret: 0, // Initial fret
  strings: 6, // Strings
  tuning: Tunings.guitar6.standard, // Tuning: default = Standard Guitar
  fretWidth: 50, // Display width of frets in pixels
  fretHeight: 20, // Display heigh of frets in pixels
  leftHanded: false, // Show mirror image for left handed players
  showTitle: false, // Set the note name as the title, so it will display on hover


Display fretboards on a browser using Javascript






No packages published