grigson

A markup language for chord charts, with a parser and system of renderers that output to HTML, plain text, and other formats. Transpose to any key, switch between light and dark themes, choose a typeface, and customise notation to taste.

The .chart format

Charts are plain-text files with YAML front matter and pipe-delimited bars. They're readable without any tooling — open one in any text editor and the structure is immediately clear.

Learn the language →

---
title: "Blue Bossa"
key: C minor
meter: 4/4
---

| Cm7 | Cm7 | Fm7 | Fm7 |
| Dm7b5 | G7 | Cm | % |
| Ebm7 | Ab7 | Dbmaj7 | % |
| Dm7b5 | G7 | Cm | % ||.

Rendered output

Drop <grigson-chart> into any page and the chart renders to HTML — no build step required for the browser.

HTML renderer docs →

Transposition

Charts transpose to any key on the fly. Useful for instruments in B♭ or E♭, or for practicing in all twelve keys.

Custom elements docs →

Light and dark themes

Built-in CSS custom properties make it easy to match any colour scheme. The slider below compares the two built-in themes side by side.

CSS custom properties →

Chord symbols

Two notation presets ship out of the box — the default symbolic style (♭ ♯ △ ø) and the Real Book style (MI, MA, MI7(♭5)). You can also define your own preset with any HTML fragments.

Notation presets →

Typefaces

Choose from three built-in typeface styles — or supply your own font via a CSS custom property.

Typefaces docs →