A TypeScript library to generate SVG chord diagrams.
Inspired by: https://github.com/tombatossals/react-chords.
Part of ChordProject
Generates SVG chord diagrams according to received specifications.
Chord Diagrammer
is on npm. To install run:
$ npm i chordproject-editor
It's really easy to draw an SVG chord diagram:
// chord diagram definitions
const chordDiagram = new ChordDiagram({
frets: [-1, 0, 2, 2, 1, 0],
fingers: [0, 0, 2, 3, 1, 0],
baseFret: 1,
});
// instrument definitions
const instrument = {
strings: 6,
fretsOnChord: 4,
name: "Guitar",
tunings: ["E", "A", "D", "G", "B", "E"],
};
const generator = new Diagrammer(); // create an instance of Diagrammer
var svg = generator.builder(chordDiagram, instrument); // build the svg
document.body.appendChild(svg); // add the svg in the html content (here the body)
A ChordDiagram is defined by:
- frets (array of numbers). Use 0 for open strings and -1 for muted strings. Frets must be relative to the base-fret.
- fingers (array of numbers). Use 0 for no finger. The fingers array length must match the frets array length. The fingers are optional
- base-fret (number)
You can customize the diagram by changing the default settings.
For example:
builder.settings.dot.radius = 5; // change the dot radius
builder.settings.neck.lineWidth = 0.8; //change the line width of the neck
Here is all the available settings:
- stringSpace
- fretSpace
- fontFamily
- fingering:
- color
- margin
- size
- visible
- dot:
- radius
- borderWith
- fillColor
- strokeColor
- openStringRadius
- neck
- useRoman
- color
- nut:
- color
- visible
- width
- stringName:
- color
- size
- margin
- visible
- grid:
- color
- width
- visible
- baseFret:
- color
- size
- margin
- visible
- stringInfo:
- color
- size
- margin
- visible
- Clone
- Install dependencies:
$ npm i
- Run in dev mode:
$ npm run start
Open a browser and navigate to http://localhost:8082/ to load the demo.
This project welcomes contributions of all types. If you find any bug or want some new features, please feel free to create an issue or submit a pull request.
Join the community and chat with us on Discord