Overview

Piano Keys is a web component that renders a piano keyboard layout. It aims to be as flexible as possible, some of the things you can do with it are:

The keyboard is rendered as SVG so scales to work well at any size

Examples

Simple

By default a full 88 key layout is rendered starting from A. This can be changed if desired as seen in later examples

Interactive

note-up / note-down events are fired when users click on a note, useful if you want to then trigger a sound or generate a MIDI event

Programmable

The component can also supports pressing & releasing notes programatically

Customizable

You can customize styling using a number of CSS variables