React-guitar-chord, a react component for chord name to guitar diagram
I made a pretty simple react component that takes in a chord name and spits out a guitar chord diagram. So far it has no regard for playability or bar chords or any alternate positions, and doesn't ensure that all the notes of a complex chord are played. It has a bias towards open notes so with enough alterations it tends toward an open strum. Still, it's pretty accurate for simpler 3 or 4 note chords. I think my next step will be ensuring that 4 or less fretted notes are included in a chord diagram, using bar chords and moving up the neck if needed.
React-guitar-chord, a react component for chord name to guitar diagram launched on October 17, 2024 with 6 votes, #1,611 of 5,185 launches that month and more than 50% of that year's launches. The site was still online in September 2026, 2 years on.
What it does
Contribute to SamDarbonne/guitar-chord-diagram development by creating an account on GitHub.
takes in a chord name ("C", "Ddim", "G#maj7b9") and displays a guitar chord diagram forfrom github.com
Does a similar job
all alternatives →
React Guitar – A guitar component for React2020 · react-guitar.com · ▲242A beautiful and accessible guitar component for React.
Guitar Dashboard – Open source music theory explorer for guitarists2018 · guitardashboard.com · ▲590A free, open source, music theory explorer for guitarists. Discover how scales and modes map to the fretboard and how chords work within scales.
A Little Tool to Visualize Guitar Chords2022 · muted.io · ▲157Guitar chord diagrams for a whole lot of popular chords at different positions on the guitar fretboard. The chord diagrams show finger positions.
See chords as flags – Visual harmony of top composers on musescoreNov 2025 · rawl.rocks · ▲129I designed a relative piano-roll-based music notation. I used 12 colored arranged in a specific way to make visible the main effects and oppositions of Western tonal harmony. The tonic is always white, so a manual annotation/interpretation is required for each MIDI file. All chords are flags of three to four colors. Minor mode is darker, major mode is lighter. Colors are arranged in thirds. I sorted the pieces from simple complex harmony. I also wrote a bit of text to explain what you may see. There's also a corpus of structures: hyperlinks of tags that allow you to find similar…
- ASA simple web game to help learn chords and basic progressions2024 · chords.yottanami.com · ▲215
Hi Hacker News, I've created Chord Nebula, a simple web-based game designed to help users learn and practice piano chords, basic progressions, and harmony fundamentals. The game integrates with MIDI keyboards, allowing you to play chords in real-time and receive immediate feedback based on the key you choose. GitHub Repository: https://github.com/yottanami/chord_nebula Live Demo: https://chords.yottanami.com Requirements: To use Chord Nebula, you'll need a MIDI keyboard connected to your computer. Current Status: Chord Nebula is still a simple project. I'm…
More work this month
the category →
Endless lofi beats composed live in your browser, over pixel-art nights in Paris, Tokyo, New York, Hong Kong, Sydney, San Francisco and more. Free, no sign-up.
Work · 25d ago · loficities.com
Smooth Recorder▲257Mac screen recordings that look edited when you hit stop
Work · 19d ago · smoothrecorder.com
Work · 13d ago · readrare.com
Source: Show HN post ↗
Launched alongside, October 2024
the whole month →
bolt.new▲1,230Build and scale high-performing websites & apps using your words. Join millions and start building today.
AI · 2024 · bolt.new
Softr for Notion▲923Turn Notion databases into portals & apps with no code
Dev tools · 2024 · softr.io
One inbox for all your work discussions
Work · 2024 · generalcollaboration.com