<uke-chord> is a Polymer style custom HTML element for a ukulele chord diagram using SVG graphics. It is tuning agnostic and can be used for any 4 string fretted instrument including the mandolin, tenor guitar, bass guitar, mountain dulcimer, cuatro and cavaquinho.


Create a chord diagram by inserting a <uke-chord> element in your HTML. Set the frets attribute to the numeric value of the frets that should be played. For example, using a GCEA tuned ukulele an F chord would have frets set to 2010. The diagram automatically places an open circle above any string marked with a 0 indicating that the string should be played open.

<uke-chord frets="2010"></uke-chord>

To add fingerings inside the bubbles use a fingers attribute. Use the position attribute to show a position indicator.

<uke-chord frets="1323" fingers="1324" position=7></uke-chord>

To add a chord name above the diagram use a name attribute. To add text under each string, such as fingerings or root position indicators use a sub attribute with underscores for blanks. If using more than one letter per string use a comma as a separator. To show the nut set the position attribute to 0.

<uke-chord frets="2313" fingers="3214" sub="__R_" position=0 name="F7"></uke-chord>

Make the diagrams larger by passing a size="L" attribute. Show the root of the chord with a diamond head by passing an r attribute set to the string where the root of the chord is found. For example a root on the 3rd string would look like this: r=2.

<uke-chord frets="2313" fingers="3214" name="F7" nut size="L" r=2 sub="3,♭7,R,5"></uke-chord>


Using the files directly

Download this repo using the 'Download' button and load the two files from the dist directory into your page's HEAD tag. The HTML file includes all dependencies.

<script src="dist/webcomponents-lite.min.js"></script>
<link rel="import" href="dist/uke-chord.html">

Using Bower

bower install uke-chord

Link the webcomponents.js and uke-chord element in the HEAD tag.

<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="bower_components/uke-chord/uke-chord.html">

In the wild

Here are a few blog posts I wrote using this element