musiq

musiq is a collection of web components for displaying musical instruments, chords, and scales on a web page. Web components are reusable HTML elements you can drop into any site or web application regardless of what framework it uses. This library provides six components covering pianos and fretboards.

The piano components include a plain keyboard for showing any note range, a chord version that highlights the correct keys when you pass in a chord name, and a scale version that colors in the notes of a given scale. Supported scales include major, minor, pentatonic, blues, and the modal scales such as dorian and phrygian. You can control the visual range, switch between key positioning styles, show note labels, and style the colors through standard CSS properties.

The fretboard components do the same for stringed instruments. There is a base fretboard that lets you place content on specific positions using named slots, a chord diagram version that takes a chord name and renders finger positions with open and muted string indicators, and a scale version that shows a scale across the full neck. These support guitar, bass, ukulele, custom tunings like drop D, left-handed orientation, and configurable fret ranges.

Installing is a single npm command. You import the package and the components become available as custom HTML tags. The project has a documentation and demo site where you can see all six components in action with live examples. It is MIT licensed.