https://github.com/fa-sharp/abc-notation-editor

A visual music notation editor for the browser
https://github.com/fa-sharp/abc-notation-editor

Last synced: 12 days ago
JSON representation

A visual music notation editor for the browser

• Host: GitHub
• URL: https://github.com/fa-sharp/abc-notation-editor
• Owner: fa-sharp
• License: mit
• Created: 2023-11-20T06:57:33.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2023-12-31T08:52:54.000Z (about 1 year ago)
• Last Synced: 2023-12-31T09:19:50.788Z (about 1 year ago)
• Language: TypeScript
• Homepage: https://fa-sharp.github.io/abc-notation-editor/
• Size: 978 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# ABC Music Notation Editor

[![library CI status](https://github.com/fa-sharp/abc-notation-editor/actions/workflows/lib.yml/badge.svg)](https://github.com/fa-sharp/abc-notation-editor/actions/workflows/lib.yml)

[![docs site CI status](https://github.com/fa-sharp/abc-notation-editor/actions/workflows/docs.yml/badge.svg)](https://github.com/fa-sharp/abc-notation-editor/actions/workflows/docs.yml)

⚠️⚠️⚠️ 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](https://abcnotation.com/) and built on top of the [abcjs](https://github.com/paulrosen/abcjs) rendering library.



## Installation

Add the corresponding package for your framework (only React available for now), as well as the [abcjs](https://github.com/paulrosen/abcjs) library, which acts as the rendering engine.

```bash

npm install @abc-editor/react@alpha abcjs

# or

pnpm add @abc-editor/react@alpha abcjs

# etc...

```

## Usage

### React

```jsx

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

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

function AbcNotationEditor() {

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