<mq-fretboard>
Guitar/bass fretboard with slot-based content placement. The component positions,
you style. Horizontal or vertical orientation, configurable string count and fret range,
inlays, full-neck, left-handed, and
multi-string span slots for barres via extra-slots.
npm install @hsablonniere/musiqimport '@hsablonniere/musiq/mq-fretboard';| Attribute | Property | Type | Default | Description |
|---|---|---|---|---|
strings |
strings |
number |
6 |
Number of strings (4 = ukulele, 5 = bass, 6 = guitar, etc.) |
start-fret |
startFret |
number |
1 |
First fret displayed. When > 1, the nut is replaced by a fret line |
end-fret |
endFret |
number |
12 |
Last fret displayed |
orientation |
orientation |
"horizontal" | "vertical" |
"horizontal" |
Layout direction of the fretboard |
fret-numbers |
fretNumbers |
string |
"" |
Frets to label: "all" or comma-separated list (e.g. "3,5,7,9,12"). Empty string (default) hides all fret numbers |
inlays |
inlays |
boolean |
false |
Show position dots at standard frets (3, 5, 7, 9, 12…). Double dot at 12 and 24 |
full-neck |
fullNeck |
boolean |
false |
Extend frets and nut edge to edge (instead of string to string) |
left-handed |
leftHanded |
boolean |
false |
Mirror the fretboard for left-handed players |
extra-slots |
extraSlots |
string |
"" |
Comma-separated multi-string span slots (e.g. "s1-s6-f5") for barres or capos |
| Slot | Description |
|---|---|
s{N}-marker |
Before the nut (open strings, muted markers) |
s{N}-f{F} |
Fret F on string N |
s{A}-s{B}-f{F} |
Fret F spanning strings A to B (requires extra-slots) |
| Property | Default | Description |
|---|---|---|
--mq-fretboard-fret-color |
#000 |
Fret wire color |
--mq-fretboard-fret-width |
1px |
Fret wire thickness |
--mq-fretboard-string-color |
#000 |
String color |
--mq-fretboard-string-width |
1px |
String thickness |
--mq-fretboard-nut-color |
#000 |
Nut color (thick bar at fret 0) |
--mq-fretboard-nut-width |
3px |
Nut thickness |
--mq-fretboard-nut-radius |
0 |
Nut border radius |
--mq-fretboard-neck-color |
none |
Neck background color |
--mq-fretboard-inlay-color |
#000 |
Inlay position dot color |
--mq-fretboard-inlay-size |
6px |
Inlay position dot diameter |
| Part | Description |
|---|---|
fret-number |
Fret number labels below (horizontal) or beside (vertical) each fret |
Default configuration: 6-string guitar, frets 1–12, horizontal orientation.
Set to "all" to label every fret, or a comma-separated list for specific frets.
fret-numbers="all"
fret-numbers="3,5,7,9,12"
With orientation="vertical", the neck goes top to bottom. Fret numbers on the left.
A minor pentatonic — position 1. Place content via named slots:
s{string}-f{fret} for fretted notes. The component positions, you style.
● = root, ● = scale
tone.
Full 12-fret display with the complete A minor pentatonic scale.
Display any fret range. When start-fret > 1, a fret line replaces the nut.
start-fret="5" end-fret="9"
start-fret="1" end-fret="24"
Set the number of strings. Works for ukulele (4), bass (5), guitar (6), 7-string, etc.
strings="4" (ukulele) — frets 1–7
strings="5" (bass) — frets 1–12
By default, frets and nut span from the first to the last string. Add
full-neck to extend them edge to edge.
String to string (default)
full-neck
Position dots at standard frets (3, 5, 7, 9, 12, 15…). Double dot at 12 and 24. Disabled by
default. Add inlays attribute to enable.
Without inlays (default)
With inlays
Style structural elements via CSS parts and custom properties.
Same scale pattern as above, but in vertical orientation.
Mirror the fretboard for left-handed players. Works with both orientations.
Horizontal — left-handed
Vertical — left-handed
Declare span slots via extra-slots="s1-s6-f5" (comma-separated). Each entry
creates a s{A}-s{B}-f{F} slot that stretches across strings A to B at fret F.
Useful for barres, capos, or any element spanning multiple strings.
Horizontal — barre at fret 5 (strings 1–6) + individual notes
Vertical — same barre pattern