Library / SDK
paulrosen/abcjs avatar
paulrosen/abcjs

abcjs: turning ABC notation text into sheet music in the browser

javascript for rendering abc music notation

2,361 stars374 forksHTMLNOASSERTION

At a glance

What is it?
A JavaScript renderer for the ABC music notation format, with a built in synthesizer, MIDI export, and a versioning history that reads like a careful maintainer's changelog.
Who is it for?
abcjs is a mature rendering library rather than a new one, and its value shows in the details: repeated section handling, transposition, tablature, chord grids, and a synthesizer that works without a soundfont download.
Can I use it commercially?
Check first. The repository uses a licence we do not classify automatically, so read its LICENSE file before any commercial use.
Is it still maintained?
Yes. The repository last received commits 20 days ago.
What is it written in?
Mainly HTML, according to GitHub's language statistics.

Answers come from the project's GitHub data, last synced on October 11, 2026, and from our analysis. They are not legal advice.

Editorial analysis

What the library actually does

abcjs renders standard music notation in a browser from ABC text, which is the compact text format for tunes. The README describes three routes in: embedding sheet music on a website you own, turning visible ABC text into sheet music on a site you do not own with a greasemonkey script, and adding the library to your own site to convert ABC text with no changes beyond including one JavaScript file.

The third of those is the interesting one, because it is what makes ABC a reasonable format to build on for a web app. ABC is plain text, so it diffs, it can live in a database, and it can be edited without a graphical score editor. abcjs is the part that makes it presentable.

Beyond rendering, the library generates MIDI files or plays notation directly in the browser, and the 6.1.0 release added a transposing feature that takes an ABC string in one key and returns a new ABC string in another. Output is SVG, which is why the changelog talks so much about SVG structure.

Documentation lives at docs.abcjs.net, and a large collection of examples sits at examples.abcjs.net. There is also an `abcjs-music` organization for related projects, with an invitation to submit projects of general interest.

Reading the release history as a compatibility guide

The README maintains a running set of announcements, and it is effectively a compatibility document. Two entries matter if you depend on the generated markup.

Version 6.3.0 changed the underlying SVG structure for the top of the score, meaning the title area, and the bottom, meaning the notes and related text. The author flags it as a possible breaking change for anyone whose code targets particular class names, and adds that the new structure should make CSS targeting easier. Version 6.1.2 made a smaller change of the same kind: each line is now surrounded with a `g` element. Both are the kind of change that breaks a scraper silently rather than loudly.

Version 6.7.0 removed the files under `test`, on the grounds that the author doubts anyone else was using them. If you were importing `abcjs/test`, that import no longer resolves, and the author asks you to contact him for a workaround. Removal in a patch-level release is unusual and worth noticing.

Version 6.2.2 exists for one specific reason: a major bug in Firefox 112 caused some lines to disappear, and although that was supposed to be fixed in Firefox 113, the update carries a workaround. It is a small release that tells you the author tracks browser regressions as they land.

Two earlier entries concern playback. The 6.4.0 release changed the method for creating chord accompaniment. And 6.0.0-beta.36 added string tablature as an option on the `renderAbc` parameters. The beta.31 release fixed octave clefs sounding an octave off because the octave calculation was happening twice, which is the kind of bug you only find once real music passes through the code.

The synthesizer, midi.js, and the audio history

Playback has gone through two mechanisms and the boundary between them is documented precisely.

The older approach depended on midi.js, and 6.0.0-beta.28 was the last version to support it. That version is preserved separately in the `historical-abcjs-versions` repository, along with the other old builds that have been removed from the main repository. If you need an old release, the README points you at that repository; within an existing branch, the last version of each major number is still available, along with many recent versions.

The switch to a peer dependency happened in 6.0.0-beta.26. midi.js is no longer a direct dependency, so it is not bundled and users who do not use the old sound generation do not pay for it. If you were on that path, the README gives the exact line to add to `package.json`:

json
"midi": "https://github.com/paulrosen/MIDI.js.git#abcjs"

That note applies to package installs only; anyone using the minified build with a `<script>` tag is unaffected, since the file is already present in the bundle.

Audio control styling changed too, in 6.0.0-beta.27, with a new `abcjs-audio.css`. If you style the audio controls yourself, you are told to add one rule:

css
.abcjs-css-warning {
	display: none;
}

The current default soundfont also changed in 6.0.0-beta.21, which is a reminder that browser playback quality depends on a font the library carries rather than on your system.

Version 7 is where the architecture changes

The README carries an informal roadmap for 7.0.0, and it is the most useful part of the page for anyone deciding whether to build on this library.

The listed changes are a better API for controlling the synth, with the stated goal of making the parameters less confusing. A plugin architecture so large features that are not widely used can be added without bloating the library. A move to a TypeScript build while still maintaining legacy browser capability. A reduction in library size through code optimization, with the author's estimate that for a user wanting the most common functionality the size might be cut in half. Better control of element spacing on the line, including support for equal size measures and configurable spacing between notes. And improved documentation, particularly for the synth.

Only the synth API and documentation are framed as solving specific current problems. The rest are engineering investments. The plugin architecture is the item with the clearest payoff for adopters, since it is the mechanism that would let tablature or other large optional features ship without penalising everyone else.

Current releases continue on the 6.x line for bug fixes and minor features, with version 7 described as already in planning. The most recent tag is v6.7.1, published on the same day as the last push, 2026-09-21, and `package.json` declares `6.7.1` to match, so the manifest and the release line agree here.

Repository, packaging, and a license question

A few structural facts are worth recording. GitHub reports this repository's language as HTML, which reflects the documentation site and examples rather than the library itself; the source lives in `src/`, with `dist/` holding built files, `index.js` and `plugin.js` at the root, and a `types/` directory that provides TypeScript definitions referenced from `package.json`. There is a `font_generator/`, a `tests/` directory, a `Dockerfile`, and a `docker-compose.yml`, plus a `.gitmodules` entry for submodule dependencies.

The build is webpack driven. `package.json` defines `build`, `build:basic`, `build:basic-min`, and `build:plugin` scripts, along with an `analyze` variant that uses `webpack-bundle-analyzer`, which fits with the size reduction planned for version 7. Tests run through mocha against a local `http-server`, opened in a browser via the `opener` package rather than run headless.

The license needs a note. GitHub's automated license detection reports `NOASSERTION` for this repository, while `package.json` declares `"license": "MIT"` and the tree contains a `LICENSE.md` file. The declared intent is unambiguous, so the metadata field is best read as a parsing failure rather than as a different or missing license. Confirm against `LICENSE.md` if the distinction matters for your use.

Scale and activity: 2,350 stars, 374 forks, and 252 open issues, with the last push on 2026-09-21 and the repository not archived. An open issue count that large on a library this old usually reflects a mix of genuine feature requests and support load, and the maintainer is a single person with a Discord and a mailing list rather than a team.

Branch and build housekeeping you may need

Two housekeeping items are documented in enough detail to be worth repeating, because both have bitten integrators.

The default branch was renamed to `main`. If you cloned before that change, the README gives the three commands to fix your local copy:

shell
git branch -m master main
git fetch origin
git branch -u origin/main main

The output folders changed as well. In 6.0.0-beta.25 the files under `bin` began being phased out, with executables moving to `dist` and file names no longer carrying the version number. Many older builds in `bin` are no longer kept in active branches; to get a specific old version you check out the branch at that tag. The README also names some layout tweaks that were pure improvement, such as the routing algorithm change in wrapping behaviour in the same beta, which it presents as likely to make layouts look better but with the caveat that odd results should be reported.

The repository also has `CONTRIBUTING.md`, `CODE_OF_CONDUCT.md`, and `SECURITY.md`, plus a `RELEASE.md` describing how versions are cut, and a `deploy-docs.sh` script for publishing the documentation site. There is a funding entry in `package.json` pointing at GitHub Sponsors, and four named contributors are credited there alongside the author.

What the README does not settle is browser support policy. It references specific Firefox regressions and mentions maintaining legacy browser capability as a version 7 goal, but there is no support matrix. If you need a guarantee about a particular browser, that question is worth asking in the project's community channels before you commit.

Editorial conclusion

abcjs is a mature rendering library rather than a new one, and its value shows in the details: repeated section handling, transposition, tablature, chord grids, and a synthesizer that works without a soundfont download. The two things to plan around are the version's willingness to change generated SVG structure, since 6.3.0 moved elements inside new wrapper tags and 6.1.2 wrapped each line in a `g` element, and the fact that 7.0.0 is where the author plans a TypeScript build and a plugin architecture. The README is unusually candid about both, including calling out an import path that no longer works. Render a chart on the examples site first, then check whether your code depends on specific SVG class names before you pin a version.

Frequently asked questions

What is the ABC music format?

ABC is a plain text notation for tunes, where a tune header carries the key, meter, and tempo, and the body is a sequence of note and chord symbols. Because it is text rather than a score file, it diffs cleanly and can be edited without a graphical editor, which is why abcjs renders it into SVG on a web page.

What is an ABC format?

In this context ABC means the music notation text format rather than a file container or a media type. abcjs takes that text and renders it as sheet music in the browser, and can also export it to MIDI or play it directly through WebAudio.

Where can I find abc music files?

Tune collections are published in ABC text, and any of them can be handed to abcjs to render. The abcjs project maintains a large set of rendered examples at examples.abcjs.net, and the related `abcjs-music` GitHub organization collects related projects that are worth browsing for source material.

Official sources

  1. Issues
  2. paulrosen/abcjs on GitHub
  3. README
  4. Releases
Add this badge to your README

If you maintain this project, the badge below links readers to this analysis and shows its maintenance status from the daily GitHub snapshot. Paste the markdown into your README; add ?metric=license or ?metric=stars to the image URL for a different field.

Add this badge to your README

markdown
[![Hysen Labs](https://hysenlabs.com/badge/paulrosen-abcjs.svg)](https://hysenlabs.com/projects/paulrosen-abcjs)