Why We Chose MDX for Our Website
Why We Chose MDX for Our Website
Published on October 23, 2023
After exploring various content authoring options for our website, we decided to use MDX. Here's why we made this choice and how it's benefited our development process.
What is MDX?
MDX is a powerful format that combines Markdown with JSX. It allows us to write content in simple Markdown syntax while seamlessly incorporating React components wherever we need interactive elements.
This is a custom styled box using Tailwind classes directly in MDX!
Why We Chose MDX
We selected MDX for our website for several key reasons:
- Developer Experience: Writing in Markdown is fast and intuitive
- Content Flexibility: We can embed interactive components when needed
- Separation of Concerns: Content remains separate from presentation logic
- Version Control: Markdown files are perfect for tracking changes in Git
- No CMS Required: We can manage content directly within our codebase
The Power of MDX in Action
Here's a simple example of how we can mix Markdown with React components:
// MDX allows us to import and use components
import { Chart } from '../components/Chart';
# Page Title
Regular markdown content here...
<Chart data={someData} />
More markdown content...
Benefits of Markdown-Based Web Development
Markdown-based development has transformed our workflow:
Markdown-Based Development Benefits
Key advantages we've experienced with our MDX approach.
Speed
Content creation is significantly faster than with traditional WYSIWYG editors
Consistency
Enforces consistent styling across all content
Portability
Content can easily be migrated between different systems
Developer-Friendly
Integrates perfectly with our Git workflow and code review process
Our MDX Workflow
Our content creation process now looks like this:
- Write content directly in markdown (MDX) files
- Use GitHub for version control and collaborative editing
- Leverage React components for interactive elements
- Style with Tailwind classes right in the markdown
- Let InfoEmu automagically get the changes online
This approach has eliminated the need for a traditional CMS while giving us maximum flexibility and control over our content.