<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 mandolin, 3 string dulcimer, ukulele, guitar, and 7 string guitar.


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>


Add a <uke-chord> element wherever you need a chord diagram in your web page. Then set the following parameters:


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. 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>


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>


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>


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>


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>


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>


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>


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>


To allow styling with CSS, the SVG output is inlined by default. To get the SVG inside an image, set an img attribute. This allows right clicking on an image and saving it, or in some browsers, dragging the image from the browser.

<uke-chord img frets="2310" fingers="231" position=0></uke-chord>

In the wild

This component was originally built for a series of posts on ukulele playing, hence the name.

More examples

Guitar chords with root on 6th string

Guitar chords with root on 5th string

Ukulele major chords

Ukulele minor chords

Ukulele dominant 7th chords

Ukulele minor 7th chords

Ukulele major 7th chords

Ukulele dominant 9th chords

Ukulele major 6th chords

Ukulele minor 6th chords

Ukulele augmented chord

Ukulele iiø V i progressions