Webeleon

Software

How We Render Chords in MDX

By Webeleon · 2 min read · Jun 18 2026

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Writing music prose means writing chord symbols, and a chord symbol is not just text — it carries a function and a colour. This note walks through how a line of MDX becomes a styled, accessible chord on the page.

The authoring surface

Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. An author writes a single tag and nothing else:

A <Chord fn="dominant">G7</Chord> resolving home.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. The fn prop is a small, closed union, so a typo fails loudly rather than rendering a mystery colour.

The component map

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum. Rather than let MDX emit raw markup, every element and custom tag resolves through a single component map. That is where the brand styling lives, which is why a chord written in one post looks identical in the next. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia.

The safety pass

Sunt in culpa qui officia deserunt mollit anim id est laborum. Because the body is author-controlled, it runs through a content-safety pass that strips scripts, event handlers, and unsafe URLs before anything is serialised. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium.

Why it matters

Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit. The payoff is that posts like Voice Leading in Four Parts can lean on rich, consistent notation without each author reinventing it. If you want the underlying format, the MDX documentation is the place to start. Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam.

Join the early list

Get new notes plus early access to the Webeleon music assistant.

occasional notes · no spam