The Whole Picture, At Your Own Pace

You've seen pieces of this before. A fragment here in a YouTube tutorial. A pattern there in an app that almost explained it. A course that spent forty minutes telling you what it was about to show you. What if you just... saw it all? Right now. In your key. On your guitar.

That's the frustration that built this tool. Not a lack of resources — there are more guitar theory resources online than anyone could watch in a lifetime. The problem is the pace, and the gaps. You watch someone explain a pentatonic shape, you get excited, and then the video ends and you're still not sure how it connects to the one you learned last week, or why your favourite solo seems to use notes that aren't in the pattern you were taught.

The Fretboard Explorer is an attempt to lay everything out at once, no explanation required, and let you find the connections yourself through playing. Because that's the only way it really sticks.

"Learn this pattern. Now learn this pattern. Now learn this other pattern." — What if you just learned how it all pieced together instead?

This tool is part of the Practice Room family — it picks up where the Pentatonic Jigsaw left off. Once you've started to find your feet on the neck, this is where you go next: every note, every shape, every chord, all in one place, all responding to your choices.

01 · Pick Your Key — All 12 of Them

Top of the sidebar is the root key grid. All twelve notes, from C to B (with the sharps and flats right there too). Click any one and everything updates instantly — the fretboard, the scale notes, the chord shapes, all of it. This is your anchor point.

There's no "default key" you're supposed to learn in. Want to jam along to a track in F#? Done. Playing with a singer who lives in Eb? Two clicks. The tool follows you, not the other way around.

02 · Scales & Modes — Grouped So They Actually Make Sense

Here's where it gets interesting. The scale list is grouped into three families: Pentatonic, Blues, and Modes. Within the Modes section, the major and minor sides sit naturally next to each other, because they share the same underlying structure. This isn't an accident — seeing them grouped is itself the lesson.

Pentatonic

• Major Pentatonic — 5 notes
• Minor Pentatonic — 5 notes

Blues

• Blues (Major) — 6 notes
• Blues (Minor) — 6 notes

Modes

• Ionian (Major) — 7 notes
• Lydian — 7 notes
• Mixolydian — 7 notes
• Dorian — 7 notes
• Aeolian (Natural Minor) — 7 notes
• Phrygian — 7 notes
• Locrian — 7 notes

Each scale has its own colour that runs consistently through the dot labels on the fretboard. When you're looking at Dorian in green, green means Dorian — you don't have to keep checking.

The blues scales are worth a special mention: the blue passing notes (the b3 in Major Blues, the b5 in Minor Blues) are highlighted with a distinctive ring on the fretboard, so you can immediately see the tension note that gives the blues its characteristic sting. That's the note Clapton bends. You'll know exactly where it lives.

03 · The Fretboard — Full Neck View

This is the main event. The full neck stretches from the nut (fret 0) all the way to fret 15 and beyond, with every scale note shown as a coloured dot. Fret markers are highlighted at the standard positions — 3, 5, 7, 9, 12 — so you never lose your place.

At the very top of the main panel, there's a tuning strip showing your open strings, with the ones that fall inside your current scale highlighted in the scale's colour. Glance at it before you start playing and you'll immediately know which open strings are available to you.

Each dot on the neck can show you two things simultaneously:

Note Name — The actual note at that position: C, F#, Bb, whatever it is. Great for connecting what you're playing to what you're hearing and eventually to what you're singing.

Interval — The relationship of that note to the root: R (root), 2, b3, 4, 5, b7, and so on. This is how you start to understand why notes sound the way they do, not just where they are.

Both labels can be shown at the same time, or you can toggle each one off independently using the Dot Labels controls in the sidebar. Show just notes while you're learning positions. Switch to intervals when you want to understand structure. Turn both off and just see the shape as dots if that's less distracting for you right now. It's all there, all your choice.

Interval Colours

Every interval has a consistent colour that's carefully chosen to be readable at a glance. The root note is always the most visually prominent — slightly larger with a ring around it — so you always know where your anchor is.

These colours are consistent across every scale and mode. The 5 is always blue. The root is always gold. Once your brain maps the colours to the sounds, you start to read the neck rather than decode it.

04 · Box Positions — The Shapes, Connected

Below the full neck view, for most scales and tunings, you'll find the Box Positions panel. This is where the mystery usually lives. Most tutorials show you one box shape and say "learn this." A few show you two. Barely any show you all five, in one place, in your key, side by side.

Here they're all laid out as numbered tabs — Position 1 through 5 (or however many the scale has) — each one anchored to a real scale tone on the low string. Click any position and a focused view of that box appears below, showing just the relevant fret range with your scale highlighted in full colour.

Here's a really nice detail: if a position also appears an octave higher on the neck (12 frets up), the tab shows both fret numbers. Because the same shape lives in two places, and once you know that, the neck suddenly feels half as big.

The notes outside the strict box shape? They're shown too, but as faded ghost dots. They're there. They're valid. They're just not the core of this particular shape. As you get comfortable, those ghost notes become your first stepping stones between positions.

05 · Chord Shapes — Every Chord, Right There

Scroll down past the fretboard and you'll find the chord shapes section for your chosen root key and tuning. This isn't just a basic triad and a barre chord. Every chord is laid out as a proper fretboard diagram, complete with:

• Fingering numbers — Each dot shows which finger to use (1 = index, 4 = pinky), so you don't have to guess at the mechanics of the shape.
• Barre indicators — Barre chords are shown with a coloured bar across the relevant fret, so it's immediately obvious which strings your index finger covers.
• Open & muted strings — Open strings (○) and muted strings (×) are clearly marked above the nut, because knowing which strings NOT to hit is just as important.
• Root highlight — The root note dot is slightly larger and ringed, so you always know the foundational note of the chord you're playing.

Chords are filterable by category — open chords, barre chords, power chords, sevenths, sus chords, and more — or you can view them all at once. The categories available adapt to your tuning (the DADGAD chords are quite different from standard, as they should be). If the root note chord doesn't work in first position, the diagram shows the fret number so you know exactly where on the neck it starts.

06 · Tunings — Including That Famous 5-String

This is one of the bits that makes this tool genuinely different. Most fretboard visualisers lock you into standard EADGBE and call it a day. This one has a full list of tunings for both guitar and bass, and all the chords and scale positions update to match.

Guitar tunings:

• Standard (EADGBE)
• Eb Standard (Eb Bb Gb Db Ab Eb) — Hendrix, SRV, Van Halen
• Drop D (DADGBE)
• Open G (DGDGBD)
• Open G 5-String (GDGBD) — Keith Richards' famous tuning, no low E
• DADGAD — the Celtic/folk favourite

Yes, Keith's open G 5-string is in there. Five strings, open G, and all the chord shapes recalculated to match. If you've ever wondered how he gets that rolling, riff-heavy sound on Brown Sugar or Start Me Up, this is the tuning to explore. The tool shows you exactly where the notes fall on a five-string neck.

Bass tunings:

• Standard Bass (EADG)
• 5-String Bass (BEADG)
• Drop D Bass (DADG)
• Eb Bass (Eb Ab Db Gb)

The chord section for bass focuses on practical patterns — root positions, octaves, fifth relationships, and walking bass approaches — rather than trying to squeeze guitar chord shapes onto four strings.

Switch between Guitar and Bass with the instrument toggle at the top of the sidebar. The tuning list updates to show only the relevant options, and everything on the page recalculates.

07 · Left-Handed? You're First-Class Here

Genuinely, not an afterthought. The L / R buttons in the top corner of the sidebar flip the entire fretboard so the nut is on the right and the neck runs left — exactly as a left-handed player holds their guitar. The string labels move to the right side. The chord diagrams mirror correctly. The open-string indicators appear on the correct side of the nut.

Every single layout detail reverses properly, because left-handed players deserve a tool that actually works for them rather than forcing them to mentally mirror a right-handed diagram every single time.

Your handedness preference is saved alongside all your other settings.

08 · Light & Dark Themes

The sun icon button in the top corner of the sidebar toggles between light and dark mode. Both are properly designed — this isn't just "invert the colours and hope for the best." Each theme has its own carefully tuned colour palette for the interval dots, the fret lines, the nut, the string thickness, and all the UI elements.

Light mode — Warm cream background, rich amber accent. Easy on the eyes in daylight.

Dark mode — Deep near-black, with brighter, more luminous dot colours tuned for contrast. The interval colours are slightly more saturated in dark mode to compensate for the darker background, so readability doesn't suffer. Genuinely comfortable for late-night practice sessions.

09 · Saving Your Preferences

At the bottom of the sidebar you'll find two buttons:

Save as my default stores your current setup — key, scale, tuning, instrument, handedness, theme, and dot label preferences — in your browser's local storage. Next time you load the page, everything will be exactly as you left it. No account needed, no login, nothing to sign up for. It just remembers.

A small "Preferences saved" badge appears next to the buttons to confirm when your settings are stored, along with a brief toast notification at the bottom of the screen.

The settings that get saved are: tuning, root key, scale/mode, note label on/off, interval label on/off, left/right handedness, light/dark theme, instrument (guitar/bass), and chord category filter.

Reset to defaults clears everything and takes you back to the starting state: standard tuning, key of A, minor pentatonic, right-handed, light theme. Useful if you want a clean start, or if you've been experimenting and want to go back to basics.

10 · How to Actually Use This Thing

Here's the approach that works best, based on how this tool was built and the experience that shaped it.

Find a backing track first. YouTube is full of them — just search for "[key] [scale] backing track." Put one on. Let it play. Then open the Fretboard Explorer, dial in the matching key and scale, and just look at it for a minute before you even pick up your guitar. Let the layout sink in.

Start with the pentatonic. If you haven't done the Pentatonic Jigsaw yet, start there. Once you're comfortable finding your way around those five-note shapes, come back here and switch to Ionian or Aeolian for the full seven-note version. You'll immediately recognise the pentatonic inside it — because it's still there. The extra notes are just slotting into gaps you already know.

Use the box positions one at a time. Don't try to memorise the whole neck at once. Pick Position 1, look at it, play it. Move to Position 2. Notice how they overlap. The ghost dots (the faded notes just outside each box) are your bridge — once a note appears as a ghost in one position and a solid dot in the next, you've found the connection.

Glance at the chords while you play. If you're jamming over a simple I-IV-V progression, look at the chord shapes for those three chords and notice where the notes you're using on the scale overlap with the chord tones. That's where the melody lives. That's how the great soloists make their lines "say something" — they're hitting the notes that matter to the chord underneath.

Don't watch theory videos while the tool is open. Seriously. Put something on with a great groove — something that makes you want to play — and use the tool as a silent visual reference. Play. Pause. Look. Play again. The visual imprint forms through the fingers, not through reading about it.

You only get better with practice. This tool is here to make that practice time count — not to replace it with more explanation.

A Final Word

This tool was built out of genuine frustration and genuine love for the instrument. It's for players at every level who are tired of getting 80% of the picture and want to finally see the whole thing. I'm far from a great player — honestly, far from a good one. But I can navigate a fretboard now, and I can improvise, and this is a big part of why.

I hope it does the same for you.

Happy playing. 🎸

Part of the Practice Room family of free music theory tools. No ads, no accounts, no subscriptions. Just tools.