#Short Answer
MDX components are reusable React blocks that editors can place inside Markdown articles for callouts, facts, timelines, FAQs, references, and other structured article patterns.
#Infobox
#Overview
MDX lets a page use Markdown for ordinary writing and JSX for custom components. In a wiki-style article, this means the body can remain easy to edit while richer sections use shared UI.
This project maps component names such as ShortAnswer, InfoBox, Timeline, and FAQ into the article renderer, so posts can use them without importing code inside every MDX file.
#History / Background
Markdown became popular because it is plain text and portable. React components became popular because they package UI and behavior. MDX connects those two workflows, which is especially useful for publications that want editorial speed and consistent presentation.
In a wiki-style system, MDX components prevent authors from rewriting the same markup for common article sections.
#How It Works
The article renderer passes a component map to the compiled MDX page. When the MDX file contains <InfoBox> or <Timeline>, React renders the matching component from the site code.
Ordinary Markdown still becomes headings, paragraphs, lists, tables, links, and code blocks. The renderer can also customize those base elements, such as adding anchor links to headings or injecting an ad after an early paragraph.
export function normalizeTitle(title: string) {
return title.trim();
}
#Important Facts
- Components should support the article, not replace the article.
- Small, named blocks are easier for editors to remember.
- Shared components keep spacing, borders, colors, and accessibility consistent.
- Markdown headings still drive the generated table of contents.
#Timeline
- Markdown appears
Plain-text writing becomes a common format for technical publishing.
- React appears
Component-based UI becomes a dominant frontend pattern.
- MDX gains traction
Markdown documents can render JSX components inside content.
- Structured posts use blocks
Reusable components power callouts, facts, FAQs, and timeline sections.
#Related Terms
#FAQ
Do MDX posts need imports for every component?
Not in this project. The article renderer provides the supported component map globally to each post.
Should every visual pattern become a component?
No. Components are best for repeated patterns. One-off article content should usually remain ordinary Markdown.
Can components break the table of contents?
The table of contents comes from Markdown headings, so keep section titles as Markdown headings even when the section body uses a component.
#References
- MDX documentation for Markdown and JSX composition.
- React documentation for component-based UI.
- Common Markdown conventions for headings, lists, code, and links.
Comments
No comments yet. Start the discussion with a useful note.