SVG Based Guitar Chord Chart Generator – VexChords

VexChords is a Chord Chart generator which helps you dynamically render guitar chords using JavaScript and SVG element.

How to use it:

Install & download.

# NPM
$ npm install vexchords --save

Import the VexChords.

import * as vexchords from 'vexchords';

Create a container in which you want to render the guitar chords.

<div class="container"></div>

const selector = '#container';

Draw a Chord Chart from an array of chords.

const chord = new ChordBox(selector);
chord.draw({
  chord: [
    [1, 2],
    [2, 1],
    [3, 2],
    [4, 0], 
    [5, 'x'], 
    [6, 'x']
  ],
  // optional: position marker
  position: 5, // start render at fret 5
  // optional: barres for barre chords
  barres: [
    { fromString: 6, toString: 1, fret: 1 },
    { fromString: 5, toString: 3, fret: 3 }
  ],
  // optional: tuning keys
  tuning: ['E', 'A', 'D', 'G', 'B', 'E']
});

Full options to customize the Chord Chart.

const chord = new ChordBox('#selector', {
  width: 100, // canvas width
  height: 120, // canvas height
  numStrings: 6, // number of strings (e.g., 4 for bass)
  numFrets: 5, // number of frets (e.g., 7 for stretch chords)
  showTuning: true, // show tuning keys
  defaultColor: '#666', // default color
  bgColor: '#FFF', // background color
  strokeColor: '#666', // stroke color (overrides defaultColor)
  textColor: '#666', // text color (overrides defaultColor)
  stringColor: '#666', // string color (overrides defaultColor)
  fretColor: '#666', // fret color (overrides defaultColor)
  labelColor: '#666', // label color (overrides defaultColor)
  fretWidth: 1, // fret width
  stringWidth: 1, // string width
  fontFamily,
  fontSize,
  fontWeight,
  fontStyle, // font settings
  labelWeight // weight of label font
  
});