Skip to Content
ReactPiano

Piano

The <Piano> component is a React wrapper around the Piano class.

Installation

pnpm add @music-ui/react

Usage

The following code renders an empty keyboard with the default Piano options:

import { Piano } from "@music-ui/react"; // don't forget to import the CSS file too! import "@music-ui/piano/styles.css"; function App() { return ( <main> <Piano /> </main> ); }

Component props

A showcase of the component props:

import { Piano } from "@music-ui/react"; function App() { return ( <main> <Piano octaves={4} /> <Piano notes="C4 E4 G4" /> <Piano notes="C4, E4, G4" /> <Piano notes="C4 E4 G4" noteLabels="1 3 5" /> <Piano notes="C4 E4 G4" playedNotes="C4 G4" /> </main> ); }

octaves

notes

notes with different voices

notes with noteLabels

notes and playedNotes

Appearance customization

See JavaScript section.

Last updated on