The Power of MDX

mdxreactinteractive

One of MDX's killer features is the ability to mix markdown with React components. You write prose naturally, then drop in interactive elements wherever you need them.

A Live Counter

This isn't a static image or a screenshot. It's a real React component with useState:

Interactive Counter

0

Click the buttons. The state persists as you scroll. This is actual JavaScript running in your blog post.

Mix and Match

You can have normal markdown around components. Here's a list:

  • Regular markdown list item
  • Another item
  • These are just markdown

And then immediately drop into something interactive:

#6496c8

Drag the sliders. The preview updates in real-time. The hex code is computed on the fly.

Custom Callouts

Components don't have to be complex. Here's a simple Callout component:

ℹī¸

This is an info callout. Useful for additional context.

💡

Pro tip: You can create any component you want and use it across all your posts.

⚠ī¸

Be careful not to over-engineer. Simple markdown is often enough.

How It Works

Components are registered in mdx-content.tsx:

const components = {
  Callout,
  ColorMixer,
  Counter,
}

Then you just use them like HTML tags in your MDX. No imports needed in the post itself.

When to Use This

Use interactive components when:

  1. Static content isn't enough — visualizations, calculators, live demos
  2. You want consistency — callouts, code playgrounds, styled elements
  3. Teaching concepts — let readers experiment, not just read

For everything else? Just write markdown. Don't overcomplicate.