<uke-chord>

<uke-chord> is a custom HTML element for tab chord diagrams using SVG graphics. It is tuning agnostic and can be used for any fretted string instrument including the ukulele, mandolin, guitar, 3 string dulcimer, etc ...

Install

Download this repo using the 'Download' button and load uke-chord.js (unminified version) or uke-chord.min.js (minified) into your page's HEAD tag. The webcomponents-lite.min.js file offers support for older browsers, so it is optional. The scripts can also be referenced directly from github:

<script src="//pianosnake.github.io/uke-chord/webcomponents-lite.min.js"></script>
<script src="//pianosnake.github.io/uke-chord/uke-chord.min.js"></script>

Use

frets

This attribute is required. Set the frets attribute to the numeric value of the frets that should be played, left to right. The number of frets determines the width of the diagram. The limit is 10 strings. Pass an 'x' to indicate a string should not be played and '0' if it should remain open. Pass an '_' (underscore) to indicate a string that should be shown but neither marked open (0) nor unplayed (x). Make sure to use quotes around this value.

<uke-chord frets="2010"></uke-chord>
<uke-chord frets="x32010"></uke-chord>
<uke-chord frets="320"></uke-chord>
<uke-chord frets="4xx30xx"></uke-chord>
<uke-chord frets="22__"></uke-chord>

fingers

To add fingerings inside the bubbles use a fingers attribute. List these from left to right.

<uke-chord frets="1323" fingers="1324"></uke-chord>
<uke-chord frets="x32000" fingers="021"></uke-chord>

name

To add a chord name above the diagram use a name attribute.

<uke-chord frets="2313" fingers="3214" position=0 name="F7"></uke-chord>
<uke-chord frets="xx0232" fingers="00132" position=0 name="D"></uke-chord>

barre

Set the optional barre attribute to span adjacent strings on the same fret. Use the same string order as frets; consecutive identical numbers form one barre.

<uke-chord frets="4222" barre="2222" fingers="201" name="Bm"></uke-chord>
<uke-chord frets="4222" barre="0222" name="Bm"></uke-chord>
<uke-chord frets="22__" barre="2200" name="Asus4"></uke-chord>
<uke-chord frets="2222" barre="2222" fingers="0020" name="Bm7" position="0"></uke-chord>

position

Use the position attribute to show a position indicator to the left of the diagram. To show the nut set position to 0. Since this value is an integer it doesn't need to be in quotes.

<uke-chord frets="1323" fingers="1324" position=7></uke-chord>
<uke-chord frets="x32010" fingers="03201" position=0></uke-chord>
<uke-chord frets="222" fingers="111" position=12></uke-chord>

sub

To add text under each string use a sub attribute with underscores for blanks. If using more than one letter per string use a comma to separate the values.

<uke-chord frets="2313" fingers="3214" sub="__R_" position=0></uke-chord>
<uke-chord frets="320003" fingers="210003" sub="EADGBE" position=0></uke-chord>
<uke-chord frets="310" fingers="21" sub="D,A,A/D" position=0></uke-chord>
<uke-chord frets="4222" sub="R,♭3,5,R"></uke-chord>

length

By default, there are only 4 frets shown. Set length to another number to show more or less frets.

<uke-chord frets="330013" fingers="230014" length=8 position=0></uke-chord>
<uke-chord frets="222" fingers="111" length=3 position=0></uke-chord>

size

Change the diagram size by passing a size attribute set to a number. Numbers greater than 1 will make the diagram bigger. Numbers smaller than 1 will make it smaller.

<uke-chord frets="2310" fingers="231" size=0.4 position=0 name="F7"></uke-chord>
<uke-chord frets="2310" fingers="231" size=1 position=0 name="F7"></uke-chord>
<uke-chord frets="2310" fingers="231" size=1.5 position=0 name="F7"></uke-chord>

r

Some publishers show the root of the chord with a diamond head. To do this pass an r attribute set to the string where the root of the chord is found. A root can be duplicated on two strings, so this parameter can contain several digits. The strings are counted from right to left.

<uke-chord frets="5433" length=5 fingers="3211" name="C" position=0 r=14></uke-chord>

colors

Customize the colors of the chord diagram by using CSS variables inside a <style> block. The following variables are available:

<style>
uke-chord.green {
  --uke-fill: #189957;       /* grid, bubbles, diamonds and barres */
  --uke-fingertext: yellow;  /* finger numbers inside bubbles */
  --uke-text: red;           /* chord name, sub, position */
}
</style>
<uke-chord class="green" frets="2310" fingers="231" position=0 name="F7"></uke-chord>
  

img

To render the diagram as an image, set an img attribute. This will allow right clicking on the diagram and saving it, or in some browsers, dragging the image from the browser.

<style>
uke-chord.purple {
  --uke-fill: #800080;
  --uke-text: #800080;
}
</style>
<uke-chord img class="purple" name="E7#9" frets="021230" position=6 sub="R,R,7,3,#9,R" fingers="02134"></uke-chord>

In the wild

This component was originally built for a series of posts on ukulele playing.