Web Components for music visualization — piano, fretboard, and more.
npm install @hsablonniere/musiqimport '@hsablonniere/musiq';<mq-piano>
Piano keyboard with realistic key geometry. Configurable range,
accurate or centered black key positioning,
preserve-ratio for real-world proportions. Stylable via
::part() and CSS custom properties. Named slots for per-key annotations.
<mq-piano-chord>
Piano keyboard with chord visualization. Pass a chord name, get highlighted keys.
Supports inversions via slash chords (C/E, C/G),
note-labels, and customizable active color.
<mq-piano-scale>
Piano keyboard with scale visualization. Major, minor, pentatonic, blues,
modes (dorian, phrygian, lydian…), and more. Distinct root color,
note-labels, and degree-labels.
<mq-fretboard>
Guitar/bass fretboard with slot-based content placement. The component positions,
you style. Horizontal or vertical orientation, configurable string count and fret range,
inlays, full-neck, left-handed, and
multi-string span slots for barres via extra-slots.
<mq-fretboard-chord>
Fretboard with chord diagram. Pass a chord name, get finger positions with
open/muted string indicators and barre support. Guitar and ukulele, multiple
voicings via position, finger-labels, and
left-handed.
<mq-fretboard-scale>
Fretboard with scale visualization across the full neck. Custom tunings
(drop D, ukulele…), configurable fret range, note-labels,
degree-labels, and left-handed.