Voicings shows how to actually play a chord — on piano and on guitar. Type or pick any chord (triads, sevenths, sus/add, extended and altered) and get a labeled piano keyboard plus three genuinely different, playable guitar voicings spread across the neck.
- 25 chord qualities: triads (major, minor, augmented, diminished), sevenths (7, maj7, m7, m7♭5, dim7, mMaj7), sus/add (sus2, sus4, add9, 6, m6) and extended/altered chords (9, maj9, m9, 11, m11, 13, 7♭5, 7♯5, 7♭9, 7♯9) — on any of the 12 roots.
- Type a chord or pick one: a flexible search bar parses real chord notation (
C#m7,Bbmaj9,F7#9,Gdim7,Am7b5...), or build one from a guided root + quality picker. Both stay in sync. - Piano diagram: a labeled two-octave keyboard with the root and every chord tone highlighted and named.
- Inversions: pick which chord tone sits in the bass — root position through as many inversions as the chord has tones — and the keyboard marks the new bass note.
- Play the chord: a synthesized playback of every note in the chord (all four for sevenths, not just a triad), arpeggiated in the order set by the selected inversion, then struck together.
- Guitar diagrams: three real, distinct voicings per chord spread across the neck — not the same shape copy-pasted at different frets. Shows fret position, open/muted strings (O/X), barres, and a toggle between note names and suggested left-hand finger numbers.
- Related chords: every other chord (across all 12 roots and 25 qualities) that shares exactly one or two notes with the current one — a quick way to find substitutes or reharmonizations.
- Fully responsive: usable on a phone with no horizontal scrolling anywhere, including the piano keyboard.
Every chord tone is spelled as a real interval from the root — a third is always some letter a third away (skipping one letter name), never an enharmonic stand-in. C#m7's minor third is E, not an Fb-style oddity, because the algorithm steps through the musical alphabet by interval size (a third = 2 letters up) and then works out which accidental lands on the exact pitch class that interval requires. This is the same letter-stepping approach used across this author's other music-theory tools (keys, mode-finder), applied here to chord tones instead of scale degrees.
One deliberate simplification: a fully-diminished 7th is, strictly, a "double-flat 7th" (e.g. Fb for G°7) — theoretically correct, but not how any mainstream chord reference actually writes it. This app spells it as the natural note a 7th chord tone enharmonically shares with a 6th (G°7 = G Bb Db E, not Fb), because that's what's actually useful to read.
Generating "a voicing" isn't just finding notes that belong to the chord somewhere on the neck — it has to be something a hand can actually play, and for the most common chord types it should be the specific shape every guitarist already knows, not just some other correct arrangement of the same notes. For major, minor, dominant 7, major 7 and minor 7, this app uses the real, standard CAGED shapes (C, A, G, E, D) transposed to whichever root is selected. When a shape lands on its own natural open position, it is the familiar open chord — asking for C major returns the real x32010, not a computed alternative that happens to contain the same three notes.
Every other quality — and a third, differently-positioned voicing even for the common ones — comes from a constraint search: for a handful of fret windows spanning the neck, it tries every combination of muted/open/fretted string, keeps only combinations that actually contain the root and stay within a playable four-fret span, and scores the rest by how many distinct chord tones they cover (root and third weighted highest, extensions and the 5th — the most omittable tone in real voicings — weighted lowest). The highest-scoring result per window becomes a voicing; the three shown are picked for both quality and spread across the neck.
Every voicing shown was checked against the actual chord: every fretted or open note played belongs to the chord, and the root is always present. It's also checked for physical playability, not just harmonic correctness: if the lowest fret in a voicing is held on two or more strings, that's one finger lying flat across everything between them — so no string inside that span is allowed to ring open, since a real finger would stop it. Half-diminished and diminished 7th chords in particular have no single hand-authored shape (they're built entirely by the search), so this constraint is what keeps their voicings to real, fingerable chords instead of technically-correct-on-paper ones nobody could actually play.
- React 19 + TypeScript — UI and the music-theory/voicing engine, both fully typed
- Vite — build tooling
- Tailwind CSS v4 — styling, CSS-first theme config
- Pure SVG for both the piano and guitar diagrams — no canvas, no chart library
No runtime dependencies beyond React itself.
git clone https://github.com/flaviagaglio/voicings.git
cd voicings
npm install
npm run devnpm run build produces a static dist/ — this is a client-side-only app, no backend.
MIT — do whatever you want with it, just keep the copyright notice.
Made with ❤️ by Flavia Gaglio