ABC Music Notation Editor

⚠️⚠️⚠️ Currently in alpha stage and missing a lot of features. Things will break. Use at your own risk! ⚠️⚠️⚠️

A visual music notation editor, using ABC notation and built on top of the abcjs rendering library.

Installation

Add the corresponding package for your framework (only React available for now), as well as the abcjs library, which acts as the rendering engine.

npm install @abc-editor/react@alpha abcjs
# or
pnpm add @abc-editor/react@alpha abcjs
# etc...

Usage

React

"use client"; // if needed - see https://react.dev/reference/react/use-client

import { ABCEditor } from "@abc-editor/react";

function AbcNotationEditor() {
  return <ABCEditor minWidth={600} onChange={(abc) => console.log(abc)} />;
}

Keep in mind that rendering and editing sheet music relies heavily on browser APIs, so this should be be a client-side-only component.