music-jsx-compiler

Write chord charts in JSX. Get MusicXML out.

A tiny component framework for building MusicXML from familiar-looking JSX — loops, sections, and chord bars instead of hundreds of lines of XML. Built for humans and the LLMs that help them write music.

npm install music-jsx-compiler

Why this exists

MusicXML is precise, but verbose. An eight-bar verse with four chords per bar can balloon into hundreds of lines — painful to write by hand and expensive to generate with AI.

With music-jsx-compiler, you describe structure once and let the compiler expand it:

<Song tempo={120} key="C" time="4/4">
  <Loop times={8}>
    <ChordBar chords={["Am", "F", "C", "G"]} />
  </Loop>
  <Bridge>
    <Comment text="only guitar for the 2 next bars!" />
    <ChordBar chords={["Dm", "G", "Em", "Am"]} />
  </Bridge>
</Song>

That becomes 9 measures (8 looped bars + 1 bridge) of valid MusicXML 4.0 with harmony symbols, rehearsal marks, and directions — roughly 10× fewer tokens than writing the XML yourself.

Quick start

1. Install

npm install music-jsx-compiler

2. Configure TypeScript (so .tsx files use this JSX runtime)

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "music-jsx-compiler"
  }
}

3. Write a song

import { Song, Loop, ChordBar, Words, compileToMusicXml } from "music-jsx-compiler";

const song = (
  <Song tempo={120} key="C" time="4/4" title="My Song">
    <Loop times={4}>
      <Words text="Guitar should start playing here" />
      <ChordBar chords={["C", "G", "Am", "F"]} />
    </Loop>
  </Song>
);

const musicXml = compileToMusicXml(song);
// → valid MusicXML string, ready to save or import into notation software

Components

| Component | What it does | |-----------|--------------| | Song | Root element — set tempo, key, time, and optional title | | Loop | Repeat its children times | | ChordBar | One measure of chords — array length must match the beat count (e.g. 4 chords in 4/4) | | Bridge | Section wrapper (adds a rehearsal mark; defaults to "Bridge") | | Section | Named section wrapper with a custom name | | Words | Lyric or direction text above the next bar | | Comment | Rehearsal or performance note attached to the next bar |

Chord symbols

Common notation just works:

C · Am · F#m · Bb · G/B · Dm7 · Cmaj7 · Gsus4 · Bdim · Caug · and more

Try the example

Clone the repo and run:

npm install
npm run compile   # writes music-sheets/output.musicxml

API

| Export | Description | |--------|-------------| | compileToMusicXml(tree) | Compile a JSX song tree to a MusicXML string | | Song, Loop, Bridge, Section, ChordBar, Words, Comment | JSX components | | parseChord(symbol) | Parse a chord string into structured parts | | flattenSong(tree) | Expand loops/sections into a flat measure list |

Requirements

• Node.js 18+
• TypeScript recommended (for .tsx and jsxImportSource)

License

MIT