notae

SVG chord and scale diagram renderer.
Zero dependencies. Works from a script tag.

Fretboard Piano Bowed strings

CDN · jsDelivr GPL-3.0 22 kb min

Live demo

API preview

// Type a symbol above

Examples

Fretboard

Barre chord with finger numbers

Per-dot colors: root · third · fifth

Scale position, horizontal layout

High position with baseFret

Banjo -drone string offset

Bass -4-string, any tuning

7-string guitar with shadow filter

Piano

Chord with finger numbers

Scale over 2 octaves with note labels

Per-key colors with degrees

Bowed strings

G major scale, violin -1st position

Position chord, horizontal layout

Cello, 1st position

Install

Browser -CDN (jsDelivr)

<script src="https://cdn.jsdelivr.net/gh/memoriainfinita/notae@master/dist/notae.js"></script>
<script>
  const svg = Notae.renderFretboard({
    name: 'Cmaj7',
    frets: [0, 3, 2, 0, 0, 0],
    fingers: [0, 3, 2, 0, 0, 0],
    tuning: ['E', 'A', 'D', 'G', 'B', 'E'],
  });
  document.getElementById('chord').innerHTML = svg;
</script>

API

Function	Chord type	Returns
`Notae.renderFretboard(chord, style?)`	`FretboardChord`	SVG string
`Notae.renderPiano(chord, style?)`	`PianoChord`	SVG string
`Notae.renderBowed(chord, style?)`	`BowedChord`	SVG string

All renderers accept an optional StyleOptions object -colors, sizes, fonts, filter effects, orientation, and more. Full type definitions and defaults at github.com/memoriainfinita/notae.