Guitar Chord Diagrams as… HTML5 Web Components. This Rocks!

Being kind of a pest about HTML5 Web Components these days here, and I’m sorry about that. But this new one rocks, and I am really happy with the result of the fun I had the other day, trying to build a guitar chord diagram with pure CSS

Here it is – AcidJs.XChord – a HTML5 Web Component for plotting purely CSS3-driven, image-less, scalable and printer-friendly guitar chord diagrams, supporting any number of strings, wrapped as a fun and easy to use custom tag:

<acidjs-xchord label="A" startat="1" label="E" description="The A-major chord">
    <acidjs-xchord-string key="e" state="muted" fret="0"></acidjs-xchord-string>
    <acidjs-xchord-string key="a" state="empty" fret="0"></acidjs-xchord-string>
    <acidjs-xchord-string key="d" state="pressed" fret="2"></acidjs-xchord-string>
    <acidjs-xchord-string key="g" state="pressed" fret="2"></acidjs-xchord-string>
    <acidjs-xchord-string key="b" state="pressed" fret="2"></acidjs-xchord-string>
    <acidjs-xchord-string key="e" state="empty" fret="0"></acidjs-xchord-string>

Using the tag above you get:

6-String Guitar Diagrams:


7-, 8-, 9- (yes, I love Djent) Axe Diagrams:


Bass Diagrams:


… Virtually any-string-number guitar chord diagram.

HTML Attributes of the <acidjs-xchord></acidjs-xchord> Tag

Any native HTML attribute (id, class, data-*, style, etc.) is supported, plus the component-specific:

  • frets – Optional number of the frets that should render. Default: "4".
  • size – Optional size (number) of the diagram. Default: 1. "1.5" or "2" will render a bigger diagram.
  • startat – From which fret should the diagram start from. Default: "1".
  • description – Optional decription of the chord, for example "This is A-minor".
  • label – Optional label of the chord, for example "Am".

HTML Attributes of the <acidjs-xchord-string></acidjs-xchord-string> Tag

  • key – The key of the string, for example "E".
  • state – The state of the played note. Possible values: "empty", "pressed" or "muted".
  • fret – The fret which is the state applied to.

JavaScript Methods of the Tag

Any native JavaScript method (document.getElementById, document.querySelector, element.setAttribute, element.removeAttribute etc. No component-specific methods, getters or setters.

Fulfill my child dream of becoming a rock star – check the demo and get the component. If you share the same interest towards HTML5 Web Components as I do these days, make sure you read my relevant blog posts and further endeavors on my HTML5, CSS3 and JavaScript Experiments and Insight website.


My New Home Studio in Malta

I recently left Germany relocating to the island of Malta, and a couple of weeks later I was finally able to deploy my new home studio with a new addition – an amazing custom-made 2 x 12 guitar cabinet with Celestion V30 speakers, built for my by Paul Gough of Zilla Cabs (cheers, Paul – for all the hard work, patience and killer quality).

Here are a few photos of the studio. Hopefully I find more time for playing the guitar in the teeth of my main job as a front-end developer. In case you are interested, here’s a detailed rundown of my rig, and on this page you’ll find a lot more photos and specs of my guitars and gear.

IMG_0487 IMG_0488 IMG_0489 IMG_0491 IMG_0492 IMG_0495 IMG_0498 IMG_0500 IMG_0501 IMG_0507 IMG_0511 IMG_0513 IMG_0514 IMG_0516 IMG_0517

Finally – thanks for reading this and greetings from sunny Malta!

HTML5 Guitar Chord Finder (Beta) Released

GuitarChords.JS is the result of a fun experiment with CSS3, HTML5 and JavaScript that eventually went crazy with the ability to play the selected chord (no Flash, but real HTML5 audio), chord inversions and types and cool real-life stompbox interface with customizable LED display, knobs, buttons and large play button.

GuitarChords.JS - HTML5 Chord Finder and Player


And this is just the Beta release! Even more to come in the official release soon.

BETA Release Features:

  • Ability to play the current chord from small external .mp3 or .ogg sounds (no Flash, but real HTML5 audio) depending on the browser support.
  • Cool and friendly stompbox-like interface with LED display, knobs and large play button.
  • Chord data is stored in easy to understand json file(s) that can be easily edited.
  • User-defined chords data files.
  • User-defined chord types.
  • Any chord can be added and played.
  • Sounds are loaded on demand.
  • Incredibly small footprint.
  • Ability to display 3 inversions for each chord.
  • Customizable backlit color of the LED display.
  • Fully localizable.
  • Easy to install, setup and use on any standards-compliant website.
  • Fully AJAX driven.

Planned Features for the Official Release

  • Support for multiple chord data files that can be changed on the fly.
  • Add more chords and inversions.
  • Add flat and sharp variants of the current chord.
  • All sounds will be embedded as base64-encoded data in a cacheable json file.
  • Convenient tuner.
  • Volume control.
  • Continuous chord playing.
  • Highlighting of the currently played note.
  • UI improvements.
  • Export of the current chord in text format.

Supported Browsers:

  • Internet Explorer 9+
  • Mozilla Firefox
  • Google Chrome
  • Apple Safari
  • Opera

GuitarChords.JS does not initialize on older versions of Internet Explorer.

Technologies Used:

JavaScript, CSS3, HTML5 Audio, JSON and SVG. SVG has been used in Internet Explorer to achieve consistent gradients instead of using the classic filter gradient that bleeds through on elements with rounded borders.


  • Standards-compliant webpage (XHTML, HTML5) or optionally Skinny DTD. GuitarChords.JS will not initialize on pages with non-standards compliant DTDs and will display a warning.
  • Web server.


Visit the info page for GuitarChords.JS, view the demo or download it straight away. The component is included in the latest version of Acid.JS Web UI too.