Virtual Guitar

Online guitar with chord finder

About this project

How to play

You can click/tap on the fretboard to play single notes, or hover/click the bridge to play multiple strings.

Playing on the fretboard will mark the frets, and playing on the bridge will play the strings as they are fretted. The arrow button on the bridge toggles the current strum direction (down or up). Strings can be muted with the buttons on the far left of the fretboard.

Chord finder

If the currently fretted strings match a chord, the chord name(s) are displayed in the upper left.

The chord finder is a work in progress. At the moment, the notation doesn't always follow conventions for naming guitar chords.


Coming from a musical background that is strongly influenced by piano, I wanted to explore guitars in more detail, especially how to build a realistic fretboard layout.

Coding the chord finder is a particularly interesting challenge, requiring a deep dive into musical theory.


The app was built with ReactJS. Sounds are created with AudioSynth.



A detailed description of how to build this project can be found in a 5-part-series of tutorial articles on my blog:

Build a Guitar with Reactjs (1): Intro, setup and guitar body

Build a Guitar with Reactjs (2): Guitar Sounds

Build a Guitar with Reactjs (3): Fretboard-SVG

Build a Guitar with Reactjs (4): The Mute Buttons

Build a Guitar with Reactjs (5): The Final Fretboard