This is a fork of https://github.com/haixiangyan/react-chord-generator. I forked this project to generate guitar chords nicely for printing out. The changes I have made are minor.

• Moved the number on the bar-chords to the left instead of on the center.
• Removed wrongly placed X'es on chords.
• Restructured some weirdly made chords.
• Fixed a few chords wrongly declared.
• Adjusted the fretboard number where needed.
• Generated an "Essential Chords" image that contains what I consider only the useful chords and not all the "sus, augmented and diminished ones".

I still think some of the chords are a bit weird. Not that they are wrong, but some of them are defined in shapes that most people would not play them and I'm looking for the most common ones for tutoring pruposes.

I don't know how to work with react at all, I only know some basic HTML and CSS because I'm a developer. Therefore I did a hacky modification of the App.js simply to make the chords printable to PDF in a nice way. If I knew more web development this could probably be made into a nice website in a proper way.

This is how the new chords look like with the number "1" on the far left of the bar-chord line and not in the middle.

├── README.md
├── package.json
├── src
│   ├── App.js                       ## Entry point
│   ├── components 
│   │   └── Chord
│   │       ├── Chord.jsx  
│   │       ├── CustomChord
│   │       │   ├── CustomChord.jsx  ## Custom Chord component
│   │       │   ├── styles.css
│   │       │   └── utils.js  ## Files to calc position of svg
│   │       └── chords.js     ## Normal chord component
│   ├── dataSource
│   │   └── chords.js         ## All chords data
│   ├── index.js
│   └── registerServiceWorker.js
└── yarn.lock

I run this in Windows Subsystem for Linux, WSL2. First install npm with sudo apt install npm -y. Then run the below to start the website.

$ npm install

$ npm start

For some reason I can't access localhost:3000, but the ip address that shows up in the terminal "IPXX:3000" works.

chordName can be 'Am', 'C', 'Fm' ...

<Chord chordName="F"/>

This page contains all basic major, minor, x5, x7, x9, sharp and sharp minor chords. These are what I consider the essential chords to learn. Knowing these chords would enable a player to play virtually any song. Some of the X7 and X9 might not be the most useful, but I included them for completeness. There are no flats in the diagram, the reason is that it's easier to conform to using either sharp or flat. I chose to go with all sharps, though technically a Bb is exactly the same as an A# on a guitar today.

There is a component called CustomChord nested in Chord component. For this component, everything should be well defined by yourself.

chord should be an object like this:

let chord = {
    "name": "F",
    "crosses": [],
    "points": [{"x": 1, "y": 2.5, "text": "3"}, {"x": 2, "y": 2.5, "text": "4"}, {"x": 3, "y": 1.5, "text": "2"}],
    "lines": [{"text": 1, "start": {"x": 0, "y": 0.5}, "end": {"x": 5, "y": 0.5}}],
    "min": {"text": "", "x": -1, "y": -1},
    "max": {"text": "", "x": -1, "y": -1}
}

Then put it into the component.

<CustomChord chord={chord} />

The rules are as followed:

Want to see how to use this to compo with text? Please check this out.

If you like this project, maybe you love my Guitar-Editor. You can edit a guitar tab with the online editor.