Guitar Fretboard User Guide • Idle Hanz

1. Overview

The Guitar Fretboard is a free browser tool for guitar and bass. It draws chords and scales on a realistic neck, walks chord progressions, plays soft plucked audio, and helps you study voice leading and shapes.

Works offline once loaded (after CDN fonts/CSS cache). Sessions store in your browser’s local storage.

Quick start: Open the app → leave the default C–G–Am–F progression → click frets to hear notes → use the red current / blue next colours under the board.

2. Layout at a glance

Area	What it’s for
Header	Session name, save/load, Focus board, Export PNG, dark mode
Left column	Instrument, tuning presets, display (neck view, scale map, labels)
Centre	Fretboard canvas, legend, path controls, progression slots
Right column	Scale/key, audio play/step, DETECT (chord/scale naming)

Focus board enlarges the neck and hides side panels. Press Esc to exit.

3. Reading the board

Mark	Meaning
Red	Current chord (focused progression slot)
Blue	Next chord in the progression
Split red\|blue	Note shared by current and next
Amber diamond	Scale note (when Scale map = Full)
Gold ring	Root emphasis
White hollow ring	Shape-capture pin (Shift+click)
Amber number badge	Arpeggio order on a path (chord mode)
A / B badges	Path endpoints (drag when lit)

Thickest string is at the bottom of the board (low pitch). Open notes sit left of the nut.

With Interval colours (hybrid), marker fill shows chord function (R, 3, b3, 5…); a red/blue outer ring still shows current vs next.

4. Tuning & instrument

Instrument: Guitar or Bass.
Strings: Count depends on instrument (e.g. guitar 6–8, bass 4–6).
Presets: Standard, Drop D, Baritone B, and more. The blue highlight matches the actual open tuning, not “first button.”
Custom: Note pickers are low→high left to right (thick/low on the left of the strip). Board top remains high string.

If you have shape-capture pins and change tuning, pins move frets on the same string to keep the same sounding notes.

5. Display options

Board

Show note names — letter names on frets (when not in “chord notes only” scale mode).
Scale map
- Off — no amber scale diamonds.
- Full — diamonds on scale tones.
- Chord notes only — only current/next chord markers; extra scale notes hidden.
Interval colours (hybrid) — function colours + current/next rings.
Emphasize roots — gold ring on roots.

Labels & chrome

Flats in flat keys, roman numerals, slash bass emphasis, colour open strings by role (current/next/scale).

6. Neck zoom (camera on the neck)

There are no start/end sliders. Zoom lives on the board:

Action	Result
Scroll over the board	Pan along the neck
Ctrl+scroll (⌘ on Mac)	Zoom in/out (pivot under cursor)
Drag fret numbers under the neck	Pan (grab cursor)
Double-click a note/fret	Centre a ~7-fret window there
Reset view (0–12) in Display	Back to frets 0–12

Status under Neck view shows e.g. Frets 5–12 · 7 wide.

7. Progression

Under the board: a sequence of chord slots (default C – G – Am – F).

Click a slot to focus it (becomes current; the following slot is next).
Named / Custom — pick root + chord type, or build a custom pitch set.
Bass / slash — root, chord tone, or arbitrary bass note.
Eye button — show/hide that slot (see Morph for special 3-state eyes on current & next).
Add / Solo / All — add a slot, solo the focused chord, or show everything again.
Max 8 chords.

Arrow keys ← → step the focus when you’re not typing in a field.

8. Voice-leading morph

Practice how notes move from current → next. Shared tones stay lit; exclusive tones pulse.

Control	Cycle (click eye)	Look
Next slot eye	Show → pair morph → Hide	Red / blue (current vs next)
Current slot eye	Show → mono morph → Hide	Greyscale motion (shape change without role colours)

Only one morph mode at a time.
Speed: ½× / 1× / 2× under the board legend.
Interval hybrid is bypassed while morphing (pair or mono colours only).
Scale diamonds hide during morph to reduce clutter.
Stops automatically for progression Play and Solo.

Keyboard: M toggles pair morph.

9. Scale & key

Right column: choose root and scale type (major modes, minor, pentatonic, exotic, etc.).

That set drives amber diamonds (when Scale map = Full) and open-string “in scale” colouring.

Roman numerals on progression slots follow this key when enabled.

10. Audio transport

Click a fret — play that pitch.
Play / Stop — walk the progression (visible slots) with the chosen pattern.
◀ ▶ — step previous / next chord and play it.
Pattern: Strum, Arpeggio, Block, Root only.
Tempo, loop, volume, octave shift.

Space toggles progression play (when focus is not on a button).

Browsers often require a click before audio starts. Click any fret once if you hear silence.

11. Detect & shape capture

Two related tools:

Chord / scale detective (right panel)

Toggle pitch chips, or seed From pair / From progression.
Mode: Chord or Scale (with optional mode-root pin).
Apply best writes the top match into the focused chord or into Scale/Key.

Shape capture (on the board)

Shift+click a fretted note → white ring pin.
One pin per string (chord grip). Same fretted spot again = remove. Another fret on the same string = move the pin.
While linked, DETECT chips follow the unique notes of the pins. Badge: Following shape.
Editing a chip unlinks detective; white rings can stay as ghosts.
Clear shape / Clear all as needed.

Example: Finger a B major shape → Shift+click each fretted note up the strings → earlier rings stay → DETECT should offer B Major.

12. Path spotlight & arps

Set path → click start (A), then end (B) on the board.
Board outside the corridor dims; notes on the path stay bright.
Width: Narrow / Normal (~3 frets) / Wide.
Play mode: Scale run / Chord arp / Scale + arp.
Direction: Up / Down / Up-down.
Play path — auditions notes along the corridor.
Drag A, B, or the beam body to move the path (handles dim until hover).

Keyboard: P set/clear path. Touch drag is supported for handles.

13. Save, load & export

Name the session in the header field.
Save / Load / Delete — browser local list.
Export / Import JSON — files you can back up or share.
Last session auto-restores when you reopen the page.
Stored: tuning, progression, display, audio, path corridor, scale map mode, etc.
Export PNG — diagram plus a caption (chords, key, path/morph flags).

Dirty sessions show a * on the title until saved.

14. Keyboard shortcuts

Key	Action
`←` `→`	Step progression
`Space`	Play / stop progression
`M`	Toggle pair morph
`P`	Set / clear path
`?`	In-app help panel
`Esc`	Close help or exit board focus
`Shift`+click	Shape-capture pin

15. Practice recipes

Goal	Try this
Voice leading	Scale map → Chord notes only · Next eye → pair morph · shared tones stay lit
Learn the key on the neck	Scale map → Full · note names on · both chords visible
Arp corridor	Set path across a shape · Chord arp · Up · Play path
Name a grip you played	Shift+click fretted notes · read DETECT · Apply best
Baritone / alternate tuning	Pick preset · shape pins follow notes if you already captured a shape

16. FAQ

No sound?

Click the board once (browser audio unlock), then raise Volume and check the octave control.

Why did scale notes disappear?

Scale map may be Off or Chord notes only. Morph also hides scale diamonds while running.

Shift+click removed a note I already had?

Older builds toggled pitch class globally. Now shape capture is per fretted place, one pin per string.

Standard preset looks selected but I’m in Baritone?

Fixed: the blue preset is the one matching your real open MIDI tuning.

Is data private?

Sessions stay in your browser unless you export JSON. Nothing is uploaded by the app itself.

Mobile?

Works best on a tablet/desktop. Path handles support touch; neck zoom uses scroll/drag where available.