<mq-fretboard-scale>

Fretboard with scale visualization across the full neck. Custom tunings (drop D, ukulele…), configurable fret range, note-labels, degree-labels, and left-handed.

← Back to index

Install

npm install @hsablonniere/musiq
import '@hsablonniere/musiq/mq-fretboard-scale';

API

Attributes / Properties

Attribute Property Type Default Description
scale scale string Scale name (e.g. "C major", "A minor pentatonic", "D dorian"). See tonal scale-type for the full list of supported scales
tuning tuning string 'E,A,D,G,B,E' Open string notes, comma-separated from low to high (e.g. "D,A,D,G,B,E" for drop D)
start-fret startFret number 0 First fret displayed. 0 includes open strings
end-fret endFret number 12 Last fret displayed
note-labels noteLabels boolean false Show note names on dots
degree-labels degreeLabels boolean false Show scale degree numbers on dots
left-handed leftHanded boolean false Mirror the fretboard for left-handed players
inlays inlays boolean false Show fret position markers (inlays) on the fretboard

CSS Custom Properties

Property Default Description
--mq-fretboard-scale-active-color #2980b9 Dot color for scale notes
--mq-fretboard-scale-root-color #c0392b Dot color for root notes

CSS Parts

Part Description
title Scale name heading above the fretboard
dot Scale note dots on the fretboard
fret-number Fret number labels (forwarded from mq-fretboard)

Basic — major scales

Minor scales

Pentatonic

Blues

Modes

Degree labels

Show scale degree numbers with the degree-labels attribute.

Both labels

Combine note-labels and degree-labels.

Fret range

Extended range

Left-handed

Right-handed

Left-handed

Custom tuning

Drop D — tuning="D,A,D,G,B,E"

Ukulele

Style — colors

Customize via --mq-fretboard-scale-active-color and --mq-fretboard-scale-root-color.