Score In URL

This repository also publishes the reusable React package @miadi/ava8-score-editor for embedding the ABC editor and score preview in Ava8-compatible applications. It's just React + abcjs under the hood, so it also works standalone, outside of Ava8, in any React (18+) app, Vite, Next.js, or otherwise.

import { ScoreEditor } from "@miadi/ava8-score-editor";
import "@miadi/ava8-score-editor/styles.css";

<ScoreEditor syncUrl onChange={(abc) => console.log(abc)} />;

Props

| Prop | Type | Default | Description | | ------------------- | ------------------------------------- | --------- | ------------------------------------------------------------------------ | | value | string | — | Controlled document; external changes (e.g. loading a saved tune) sync into the editor. | | initialValue | string | — | Uncontrolled seed document (ignored if value is set). | | onChange | (value: string) => void | — | Fires on every edit. | | syncUrl | boolean | false | Mirrors the document into the ?s= URL query param (base64). | | theme | "light" \| "dark" | "light" | Built-in stylesheet variant; no consumer CSS overrides required for dark UIs. | | showAudioControls | boolean | false | Renders abcjs's transport widget (play/pause/tempo/cursor) under the score. | | dragToEditPitch | boolean | true | Click a note in the rendered score and drag up/down to change its pitch; rewrites the ABC text automatically. Chords are not yet supported and are ignored. | | onRenderError | (message: string) => void | — | Called instead of throwing when the current ABC notation fails to render. | | renderOptions | Partial<abcjs.AbcVisualParams> | — | Extra options merged into every abcjs.renderAbc() call (e.g. scale). |

Peer dependencies are only react/react-dom (>=18); CodeMirror is bundled internally so consumers never need to install or version-match it themselves.

Score In URL lets you write your sheet music in ABC Notation, and share it through a URL, where all content of the score is encoded (base64) as a query parameter. It's heavily inspired by the great project: Hashify, which does a similar thing with Markdown documents.

It is privacy-friendly, as there is nothing stored on a remote server. This website is, in fact, hosted on GitHub Pages, with no backend whatsoever.

Score In URL is free and open source, under the MIT license. You can find the source code on GitHub.

ABC Notation

ABC Notation is a way to write sheet music with plain text. You can learn more about it, by reading the full documentation, or use this cheat sheet as a quick reference.

Examples

Bach Partita 3 Preludio

A simple C Major scale

Air on G String

Running and Developing Score In URL

Dependencies:

• Abcjs
• CodeMirror
• Vite
• Tailwind CSS
• TypeScript

To start a testing server:

npm run dev

To run a production version of Score In URL, build the project, and host the destination directory as static files, with basically any server.

npm run build

If you'd like to host this project on a sub-path, like I do on https://powersnail.com/ScoreInUrl, supply the build command with a base URL, otherwise, the internal links will not point to the correct address.

npm run build -- --base=/subpath/

Currently, I'm hosting with GitHub Pages, by pushing the destination folder to a separate branch dist, and pointing GitHub Pages to that branch.

Acknowledgement

My utmost gratefulness to Hashify for the inspiration. And special thanks to Hero icons for all the icons on this site.