<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.

← Back to index

Install

npm install @hsablonniere/musiq
import '@hsablonniere/musiq/mq-piano-chord';

API

Attributes / Properties

Attribute Property Type Default Description
chord chord string — Chord name (e.g. "C", "Ebm", "F#maj7"). Supports slash chords for inversions ("C/E")
note-labels noteLabels boolean false Show note names on active keys (English notation: A, B, C, D, E, F, G)

CSS Custom Properties

Property Default Description
--mq-piano-chord-active-color #4a90d9 Fill color for active (chord) keys

CSS Parts

Part Description
title Chord name heading above the keyboard
key All keys (forwarded from mq-piano)
key-white White keys (forwarded from mq-piano)
key-black Black keys (forwarded from mq-piano)

Basic — triads

Major, minor, diminished.

Basic — seventh chords

Major 7, minor 7, dominant 7.

Note labels

Display note names on active keys with the note-labels attribute.

Inversions — slash chords

Chord over a specific bass note.

Root position

1st inversion

2nd inversion

Style — active color

Customize via --mq-piano-chord-active-color.