Inline Text Expansions: Context Without Clutter
How the new inline expansion pattern keeps articles skimmable while still surfacing citations, context, and nerdy details on demand.
Why inline text expansions?
Long-form writing swings between two extremes: either you bury readers in footnotes or you leave out the interesting details. Inline expansions add a third option.
Any phrase can become a trigger .
How the component works
- Editors add
data-inline-contentto any inline element. - An optional
data-inline-sourcesattribute supplies citations. - The React component scans the rendered HTML and wires up toggle behavior.
Everything runs client-side so MDX or CMS content stays portable.
Accessibility considerations
The trigger receives role="button", tabindex="0", and aria-expanded state. Escape collapses the active expansion. Screen readers hear the extra copy in an .
Editorial workflow
You can treat expansions like structured footnotes. Here is the JSON you drop into data-inline-sources:
{"title":"Internal design note","url":"https://example.com/design-note"}
Multiple sources? Just provide an array. The component pings our /api/link-status endpoint before rendering so we never show dead links.
Real-world use
We're using inline expansions across the retro blog to capture without breaking the narrative.
If you're reading this post in the dark retro theme, tap any highlighted phrase to see the expansion with that DOS-style glow.