RiffScore

Easily embed an interactive sheet music editor in your React web app

Default (No Props)

Using <RiffScore /> with no configuration renders an interactive grand staff with 4 measures

<RiffScore />
=

Untitled

Treble Clef Only

Single treble staff for melody lines

<RiffScore config={{
  "score": {
    "title": "Melody Line",
    "staff": "treble",
    "measureCount": 4,
    "keySignature": "G"
  }
}} />
=

Melody Line

Bass Clef Only

Single bass staff for bass parts

<RiffScore config={{
  "score": {
    "title": "Bass Line",
    "staff": "bass",
    "measureCount": 4,
    "keySignature": "F"
  }
}} />
=

Bass Line

Read-Only Display

Interactions disabled - perfect for embedding static scores

<RiffScore config={{
  "ui": {
    "showToolbar": false
  },
  "interaction": {
    "isEnabled": false
  },
  "score": {
    "title": "Static Score",
    "staff": "grand",
    "measureCount": 2
  }
}} />

Static Score

Compact View

Scaled down for preview or thumbnail display

<RiffScore config={{
  "ui": {
    "scale": 0.75,
    "showToolbar": false
  },
  "score": {
    "title": "Compact Preview",
    "staff": "treble",
    "measureCount": 2
  }
}} />

Compact Preview