What Is an MDX Component for Wiki Articles?

#Short Answer

#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

#Timeline

1. 2004
   Markdown appears

   Plain-text writing becomes a common format for technical publishing.

2. 2013
   React appears

   Component-based UI becomes a dominant frontend pattern.

3. 2017
   MDX gains traction

   Markdown documents can render JSX components inside content.

4. Today
   Structured posts use blocks

   Reusable components power callouts, facts, FAQs, and timeline sections.

#Related Terms

#FAQ

#References