MDX Components Showcase

This blog post demonstrates all the custom MDX components available for creating rich, interactive technical content. Each component is designed to enhance the reader's experience and make complex information more digestible.

Tweet Embeds

Sometimes you want to reference a specific tweet that sparked a discussion or provides important context:

The Tweet component automatically embeds the tweet with proper theming and maintains the original formatting.

Code Diffs

When showing improvements or fixes, side-by-side code comparisons are invaluable:

1// Old inefficient approach
2function processData(items) {
3const results = [];
4for (let i = 0; i < items.length; i++) {
5  if (items[i].active) {
6    results.push(items[i].value * 2);
7  }
8}
9return results;
10}

The CodeDiff component highlights additions in green and deletions in red, making changes immediately apparent.

Performance Metrics

Click on any column header to sort the data. This interactive table helps readers quickly identify the most significant improvements.

Interactive Performance Charts

For time-series data or A/B testing results, the PerfChart component provides an interactive visualization:

Toggle between "Before", "After", or "Both" views to analyze the performance impact across multiple test runs.

Callouts for Important Information

File Structure Visualization

When discussing refactoring or project structure changes, the FileTree component provides a clear visual representation:

The color coding makes it easy to see what files were added (green), modified (yellow), or deleted (red).

Tabbed Code Examples

When showing multiple approaches or comparing frameworks, tabs keep the content organized:

import { createFileRoute } from '@tanstack/react-router'

export const Route = createFileRoute('/blog/$slug')({
  component: BlogPost,
  loader: async ({ params }) => {
    const post = await fetchBlogPost(params.slug)
    return { post }
  }
})

function BlogPost() {
  const { post } = Route.useLoaderData()
  return <article>{post.content}</article>
}

Live Code Sandbox

For complex examples that benefit from hands-on experimentation, embed a live CodeSandbox:

Readers can interact with the code directly, making changes and seeing results in real-time.

Conclusion

These MDX components transform static blog posts into interactive learning experiences. They're particularly valuable for:

• Technical tutorials that need code examples and comparisons
• Performance case studies with metrics and visualizations
• Architecture discussions that benefit from file structure diagrams
• API documentation with live examples

The combination of these components allows you to create comprehensive, engaging technical content that helps readers understand complex concepts through multiple formats and interactive elements.