Design System · Markdown

MarkdownReader

Generic LFM-rendered reading column. Wraps an MDAST tree in a 70ch column with prose styling. Top chrome: optional back-link + optional "Edit on source" link. Renders Sources at the bottom when citations are non-empty.

Renamed from ProjectReader in changelog 2026-04-27 (03) to make its non-domain reuse explicit.

Mode
Theme

Default — back to projects

Without overriding backHref / backLabelTxt, the back link defaults to "← All projects" pointing to /projects/.

Why this exists

Most VC content is either polished-but-late or fast-but-shallow. There's a third option: substantive content shipped at the cadence of a working analyst desk — citation-rich, written to a standard that survives scrutiny.

What we share

  • Real drafts in flight (sanitized)

  • Editorial style rules expressed as code (lintable)

  • Tools and prototypes — currently spinning around Content Farm

Show your work-in-progress. The act of showing is the work.

Inline code looks like parseMarkdown(entry.body) returning a normalized MDAST tree.

Custom back-link — used by working-groups detail page

Pass backHref and backLabelTxt to point the back link elsewhere. Both pages that consume this component (projects, working-groups) use this pattern.

Why this exists

Most VC content is either polished-but-late or fast-but-shallow. There's a third option: substantive content shipped at the cadence of a working analyst desk — citation-rich, written to a standard that survives scrutiny.

What we share

  • Real drafts in flight (sanitized)

  • Editorial style rules expressed as code (lintable)

  • Tools and prototypes — currently spinning around Content Farm

Show your work-in-progress. The act of showing is the work.

Inline code looks like parseMarkdown(entry.body) returning a normalized MDAST tree.

Props + tokens
<MarkdownReader
  tree={tree}                 /* MDAST root from parseMarkdown() */
  citations={citations}       /* tree.data.citations.ordered */
  editUrl="..."               /* optional: 'Edit on source' link */
  backHref="/projects/"       /* default: '/projects/' */
  backLabelTxt="All projects" /* default: 'All projects' */
/>

/* Tokens read */
--color-text, --color-text-muted, --color-primary, --color-surface, --color-border,
--font-display, --font-body, --font-code