chord-commander

A guitar chord voicing tool that loads faster than you can tune your guitar.

---

Chord Commander is a browser-based SPA for guitarists who want to visualise chord voicings across the fretboard, organise their grip library, and build custom chord type collections — all without installing anything, signing up for anything, or waiting for anything to load.

Double-click index.html. That's it. You're in.
Or try it here: joexo.codeberg.page/chord-commander

What it does

Chord Viewer — Pick a chord type from the drawer, see every voicing across the full 24-fret neck, colour-coded by interval (root, M3, P5, m7...). Rootless voicings work too — implied roots shown as dashed rings.

Grips Editor — Your personal library of fingerings, organised by chord type. Each grip shows its colour-coded interval diagram. Flip between enharmonic interpretations (is that a b5 or a #11?) with a dropdown. Add grips by clicking on a mini fretboard in a modal.

Chord Editor — Build and edit chord types from scratch. Toggle intervals on/off, switch enharmonic spellings (m3 vs #9, b5 vs #11), name your chord whatever you like, mark it rootless. Duplicate detection warns you if your new chord is already in there under a different name.

Save / Load — Your collection lives in a JSON file. Save it, load it, name it, version it. The drawer shows the collection version number and timestamp so you always know what you loaded.

No dependencies. Zero.

Not a single npm install. Not a framework. Not a bundler. Not a build step. Not a CDN. Not a cookie banner. The entire app is:

app.js            ~285 lines — wires everything together
musicTheory.js    ~400 lines — pitch class matching, chord identification, voicing layout
data/             chord types + grip shapes
components/       25 component files

Total payload: ~97 KB unminified. Scripting time on first load: 3 ms.

Open index.html. Works offline. Works on a plane.

Architecture

The app is built on triad.js — a 112-line hand-rolled view library. No virtual DOM. No diffing. No retained object graph. Every component is a factory function that returns a { render } object:

(function ({ e, makeView, dispatch }, app) {
  app.myComponent = function (args) {
    var view = makeView(function () {
      return e('div', 'Hello', { className: 'thing' });
    });
    return {
      render: function () { return view.render(['dep.js', 'dep.css']); }
    };
  };
})(triad, app);

Dependencies load lazily and sequentially on first render. The grips editor and chord editor pages don't load until you visit them. State lives in factory closures. Cross-component communication goes through a tiny event bus (dispatch / addEventListener). Named stable sub-views in app.main mean chord selection only re-renders the two views that actually changed — not the whole page.

Music theory engine

The musicTheory.js module handles:

• Chord identification — give it a set of pitch classes, get back the chord name and all enharmonic interpretations
• Voicing layout — takes a grip shape and a chord type, returns a matrix for fretboard rendering, packed into rows by fret range compatibility
• Bitmask matching — allInterpretations uses integer bitmask comparison instead of sorted-array equality, running across all 34 chord types × candidate start frets in ~5 ms for the full 73-grip library
• Enharmonic resolution — b5 vs #11, m3 vs #9, b6 vs #5 — each chord type carries its own enharmonic preferences

Default collection

Ships with 34 chord types and 73 grip shapes covering most of what a jazz guitarist needs:

Major, minor, Dom7, Maj7, minor7, min7(b5), Dom7(b9), Dom7(#9), Dom7(b5), Dom7(#5), Dom9, Dom13, Augmented, Diminished, various rootless voicings, sus4... plus the extended and altered stuff.

Everything is user-editable. Delete what you don't need, add what you do.

Compatibility

No framework means no framework's minimum browser requirements. The app targets:

• Chrome 57+, Firefox 52+, Safari 10+ (CSS Grid support)
• No const/let — all var
• No arrow functions — all function
• No template literals — string concatenation
• No CSS nesting — flat selectors throughout

Not tested on IE11 and we have no plans to start.

Running the tests

Open test.html in a browser. 150 tests across 18 suites covering the music theory engine. No test runner, no build step — just open the file.

Contributing

Read docs/architecture.md before adding anything — it covers the component rules, encouraged patterns, and a catalogue of approaches that were tried and turned out wrong. If you're using an AI coding assistant, point it at that file.

PRs welcome. Issues welcome. Opinions about jazz harmony welcome.

Engineering

Chord Commander was designed and engineered by Joel Sebastian Andersson, developed through an iterative AI-assisted software engineering process using Claude (Anthropic) as the implementation engine.

License

Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International (CC BY-NC-SA 4.0)

This project exists solely to support education, teaching, and research. You are free to use, share, adapt, and extend it — including in academic courses, research projects, and non-commercial tools — as long as you give appropriate credit, indicate any changes made, and distribute any derivative works under the same licence.

Commercial use is not permitted. You may not sell this software, include it in a paid product or service, use it to generate revenue, or sublicense it for commercial purposes.

The ShareAlike condition ensures that any extensions or adaptations of this work remain equally open and non-commercial — so improvements made in an academic context stay in the academic commons.

Full licence text: https://creativecommons.org/licenses/by-nc-sa/4.0/