Getting Started with MDX on My Site
How I set up MDX for interactive content - it's easier than you think!
Welcome to my new MDX-powered site! I've just migrated from Observable Framework to Next.js with MDX, and I'm excited about the possibilities.
Why MDX?
MDX lets me write markdown like this, but also drop in React components whenever I need interactivity. No more worrying about apostrophes breaking my build - they just work!
Interactive Components
Here's that regression plot component I built earlier:
Pretty cool, right? I can use any React component I've built, right in my markdown.
Code Examples
And of course, code highlighting works great:
function greet(name) {
return `Hello, ${name}! Welcome to my site.`;
}
What's Next?
I'm planning to add more interactive visualizations using Observable Plot and D3. The best part? My private journal uses the exact same system, so I can experiment locally before publishing.
Stay tuned for more experiments!