Music chords

Render guitar, ukulele, banjo, and other fretboard chord diagrams directly in your cards with the <fret-board> and <string-note> tags. The number of strings is configurable, so the same syntax works across instruments.

Guitar

<fret-board frets="4" strings="6" chord="C">
  <string-note string="6" mute></string-note>
  <string-note string="5" fret="3" finger="3"></string-note>
  <string-note string="4" fret="2" finger="2"></string-note>
  <string-note string="3" open></string-note>
  <string-note string="2" fret="1" finger="1"></string-note>
  <string-note string="1" open></string-note>
</fret-board>

Renders as:

Ukulele

<fret-board frets="4" strings="4" chord="C">
  <string-note string="4" open></string-note>
  <string-note string="3" open></string-note>
  <string-note string="2" open></string-note>
  <string-note string="1" fret="3" finger="3"></string-note>
</fret-board>

Renders as:

Banjo

<fret-board frets="4" strings="5" chord="C">
  <string-note string="5" open></string-note>
  <string-note string="4" fret="2" finger="2"></string-note>
  <string-note string="3" open></string-note>
  <string-note string="2" fret="1" finger="1"></string-note>
  <string-note string="1" fret="1" finger="1"></string-note>
</fret-board>

Renders as:

Attributes

frets — how many frets the diagram shows (typically 4–5).
strings — instrument-dependent: 6 for guitar, 4 for ukulele, 5 for banjo.
chord — the chord label rendered above the diagram.
<string-note>: string is 1-indexed from the high side of the instrument, fret marks a fretted note, and finger adds an optional fingering hint.
Add open for an open string marker and mute for a muted string marker.

The custom elements pass through the card sanitizer — see HTML and Tailwind for the broader story on what's allowed on a card.