The Power of MDX - A Practical Guide

•tutorial
Back

MDX combines the simplicity of Markdown with the power of JSX, allowing you to seamlessly integrate React components into your content. This post will show you practical examples of how to leverage MDX in your projects.

Basic Markdown Features

MDX supports all the standard Markdown syntax, so you can write content as usual:

MDX is a powerful tool for content creators who want to mix components with prose.

Embedding React Components

The real power of MDX comes from its ability to use React components directly in your content. Let's create some examples you can use right away:

Simple Counter Component

Here's a simple counter component:

Count: 3

The code for this component:

import { useState } from 'react'
 
export const Counter = ({ initialCount = 0 }) => {
  const [count, setCount] = useState(initialCount);
  
  return (
    <div style={{ padding: '1rem', margin: '1rem 0', border: '1px solid #eaeaea' }}>
      <button onClick={() => setCount(count - 1)}>-</button>
      <span>Count: {count}</span>
      <button onClick={() => setCount(count + 1)}>+</button>
    </div>
  );
};
 
<Counter initialCount={3} />

Interactive Examples

Color Swatch Component

Let's create a simple color swatch component:

Primary Blue

#0070f3

Accent Pink

#ff0080

Dark Gray

#1a1a1a

The code for this component:

export const ColorSwatch = ({ hex, name }) => (
  <div style={{ 
    display: 'flex',
    alignItems: 'center',
    margin: '10px 0'
  }}>
    <div style={{
      backgroundColor: hex,
      width: '50px',
      height: '50px',
      borderRadius: '4px',
      marginRight: '10px'
    }} />
    <div>
      <strong>{name}</strong>
      <p style={{ margin: 0 }}>{hex}</p>
    </div>
  </div>
);
 
// Usage:
<ColorSwatch hex="#0070f3" name="Primary Blue" />
<ColorSwatch hex="#ff0080" name="Accent Pink" />

Dynamic Content

MDX lets you use JavaScript expressions directly in your content:

Hello, MDX User!

Welcome to the future! It's now 2025.

Here's the code:

export const Greeting = ({ name }) => <h2>Hello, {name}!</h2>
 
<Greeting name="MDX User" />
 
{new Date().getFullYear() > 2024 ? 
  <p>Welcome to the future!</p> : 
  <p>Still in 2024!</p>
}

Creating a Tabbed Interface

Here's a tabbed interface component that displays different content based on which tab is selected:

function hello() {
  return "Hello, world!";
}

JavaScript is a versatile language that powers the web.

Here's the code for the tabs component:

import { useState } from 'react'
 
export const Tabs = ({ children }) => {
  const [activeTab, setActiveTab] = useState(0)
  
  return (
    <div className="tabs-container">
      <div className="tabs-header">
        {children.map((child, index) => (
          <button 
            key={index}
            className={index === activeTab ? 'active' : ''}
            onClick={() => setActiveTab(index)}
          >
            {child.props.label}
          </button>
        ))}
      </div>
      <div className="tab-content">
        {children[activeTab]}
      </div>
    </div>
  )
}
 
export const Tab = ({ children }) => children
 
// Usage:
<Tabs>
  <Tab label="JavaScript">
    {`function hello() {
      return "Hello, world!";
    }`}
  </Tab>
  <Tab label="Python">
    {`def hello():
      return "Hello, world!"`}
  </Tab>
</Tabs>

Interactive Form Example

Here's a simple form component that demonstrates state management:

Conclusion

MDX gives content creators the best of both worlds: the simplicity of Markdown for static content and the power of React for interactive elements. By combining these technologies, you can create rich, dynamic content experiences that engage your readers.

For more information, check out the official MDX documentation (opens in a new tab).

not made by a 🤖