The "Content as Code" philosophy is revolutionizing how development teams manage documentation, blog posts, and website copy. By treating content like source code—storing it in Git, versioning it, and running it through a CI/CD pipeline—we gain unprecedented control and consistency. But what happens when your content needs to be dynamic?
Traditional static-site generators compile content at build time, which is perfect for a personal blog but falls short for applications with user-generated content, CMS-driven pages, or personalized experiences. The challenge becomes: how do you maintain the power of rich, component-driven content without the limitations of a static build step?
Enter mdx.do, a service designed to bridge this gap. It brings the power of on-demand MDX compilation to any application, simplifying your workflow and unlocking new possibilities for dynamic content.
Before we dive into the solution, let's talk about the magic of MDX.
MDX is an authorable format that lets you seamlessly write JSX directly inside Markdown documents. Imagine writing a standard blog post but having the ability to embed fully interactive React components anywhere you like.
MDX tears down the wall between static text and dynamic applications, allowing you to create truly rich, immersive experiences.
The standard approach to handling MDX involves processing .mdx files as part of your application's build process. Frameworks like Next.js and Gatsby have powerful integrations that transform your MDX files into optimized React components before you deploy your site.
This works beautifully for content that lives in your codebase. But it creates a significant bottleneck for dynamic content fetched at runtime, such as:
In these cases, you can't re-run a build for every piece of new content. While you could bundle the MDX compiler into your server or even your client, it's a heavy, complex dependency that can slow down your application.
This is precisely the problem mdx.do solves. It's a simple, powerful API that offloads the entire compilation process.
How it works is refreshingly simple:
No complex build steps. No heavy dependencies in your bundle. Just a single, reliable API call.
Let's see just how easy it is to integrate. Using the @do-sdk/mdx helper, you can transform content in a few lines of code.
import { mdx } from '@do-sdk/mdx';
// Compile your MDX string into a renderable component
const { component, frontmatter } = await mdx.compile({
content: `
---
title: Hello MDX!
author: '.do'
---
# This is a heading
And this is **Markdown** with a <LiveComponent />!
`
});
// `component` can now be rendered in your React app,
// and `frontmatter` contains your metadata.
// frontmatter -> { title: 'Hello MDX!', author: '.do' }
In this example, mdx.do not only compiles the Markdown and JSX but also automatically parses the frontmatter—the YAML metadata at the top of the content. This is perfect for populating page titles, author bylines, or category tags without any extra effort.
Integrating mdx.do streamlines your architecture and simplifies development in several key ways:
The "Content as Code" movement is about making content more manageable, powerful, and integrated with our development processes. For static content, our tools are mature. For dynamic content, mdx.do provides the missing link.
It offers the ultimate utility for dynamic content generation, empowering you to build richer, faster, and more flexible applications with React and MDX.
Ready to transform your content workflow? Visit mdx.do to get started.