Scale diagrams

Displaying scale information is a common use case for any fretboard library.

The renderScale function

Albeit passing all positions is always an option, calling Fretboard.renderScale can save you some time:

import { Fretboard } from "@music-ui/fretboard";
 
const fretboard = new Fretboard();
 
fretboard.renderScale({ root: "C", type: "major" });

Output:

Scale types

The available scale types come from the @tonaljs/scale-type package and can be found here .

This includes:

• harmonic and melodic minor;
• scale modes (e.g. dorian, mixolydian, phrygian…);
• minor and major pentatonic;
• minor and major blues;
• exotic names that became popular in some circle jerk subreddit.

Note highlight example

If you want to display the note names and to highlight all the root note occurrences:

import { Fretboard, DEFAULT_COLORS } from "@music-ui/fretboard";
 
const fretboard = new Fretboard({
  positionText: ({ name }) => name,
});
 
fretboard.renderScale({ root: "C", type: "major" });
fretboard.style({
  fill: ({ degree }) =>
    degree !== 1 ? DEFAULT_COLORS.positionFill : DEFAULT_COLORS.highlightFill,
});

Output:

You can use the highlightDegreeFill utility function to avoid writing the degree comparison yourself:

import { Fretboard, highlightDegreeFill } from "@music-ui/fretboard";
 
const fretboard = new Fretboard({
  positionText: ({ name }) => name,
});
 
fretboard.renderScale({ root: "C", type: "major" });
fretboard.style({
  fill: highlightDegreeFill({ degree: 1 }),
});

Pass the base and highlight colors if you need ones different from the default:

import { Fretboard, highlightDegreeFill } from "@music-ui/fretboard";
 
const fretboard = new Fretboard({
  positionText: ({ name }) => name,
});
 
fretboard.renderScale({ root: "C", type: "major" });
fretboard.style({
  fill: highlightDegreeFill({
    degree: 1
    fill: "gray",
    highlightFill: "orange"
  }),
});

Box systems

Guitar scales are often represented and studied in boxes, i.e. in vertical oriented fret groups.

Supported box systems

The @music-ui/fretboard package supports the following box systems:

CAGED

The CAGED system takes the open chord shapes and moves them across the fretboard. It is in fact named after some of the cowboy chords (C, A, G, E, D).

Pentatonic

The pentatonic boxes are perhaps the most common example of box system, and can be seen as a subset of the CAGED system omitting the 4th and 7th degree of the corresponding major or minor scale:

Three Note Per String (TNPS)

The TNPS system is less chord shape friendly perhaps, but its even note distribution across strings makes any picking strategy consistent.

Focusing on a single box

If you want to display just a single box like in the examples above, use either the disableOtherBoxes or the displayBoxOnly option.

Example with disableOtherBoxes:

import { Fretboard, highlightDegreeFill } from "@music-ui/fretboard";
 
const fretboard = new Fretboard({
  positionText: ({ name }) => name,
});
 
fretboard.renderScale({
  root: "C",
  type: "major",
  box: {
    system: "CAGED",
    box: "G",
  },
  disableOtherBoxes: true,
});
 
fretboard.style({
  fill: highlightDegreeFill({ degree: 1 }),
});

Output:

Example with displayBoxOnly:

import { Fretboard, highlightDegreeFill } from "@music-ui/fretboard";
 
const fretboard = new Fretboard({
  positionText: ({ name }) => name,
});
 
fretboard.renderScale({
  root: "C",
  type: "major",
  box: {
    system: "CAGED",
    box: "G",
  },
  displayBoxOnly: true,
});
 
fretboard.style({
  fill: highlightDegreeFill({ degree: 1 }),
});

Output: