In the world of modern web development, content is king. But what if your content could do more than just sit on the page? What if it could be as dynamic, interactive, and powerful as your React components? This is the promise of MDX, and a new service, mdx.do, is making it easier than ever to achieve.
Traditionally, the power of MDX—embedding live JSX components within Markdown—has been tied to a static build step. This is great for blogs and documentation sites, but it falls short when your content needs to be truly dynamic. Imagine content pulled from a CMS, generated by users, or updated in real-time. The static build process becomes a bottleneck.
Enter mdx.do: a simple and powerful API for MDX compilation as a service. It decouples content compilation from your build pipeline, empowering you to embrace a true "Content as Code" workflow for any React application.
If you're not yet familiar with it, MDX is an authorable format that lets you seamlessly write JSX in your Markdown documents. It's a superpower for content. Instead of being limited to static text and images, you can embed charts, interactive forms, or any other React component directly into your content.
This transforms static documents into rich, application-like experiences, blurring the lines between content and user interface.
The standard way to use MDX involves a bundler plugin like @mdx-js/loader for Webpack or native integrations in frameworks like Next.js and Gatsby. The bundler finds your .mdx files during the build process, compiles them into React components, and bundles them with your application.
This works perfectly for content known at build time. But what about:
In these scenarios, the content isn't available when you build your app. You need to compile it on-demand.
mdx.do solves this problem with an elegant API. It offloads the entire compilation process to a dedicated service. You send an MDX string, and it sends back a ready-to-render React component. No complex build steps, no heavy dependencies in your bundle—just a simple API call.
Here’s how easy it is to use with the official SDK:
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.
In this example:
This simple workflow unlocks powerful, dynamic content generation capabilities that were previously complex to implement.
We've gathered some common questions to help you understand the power of mdx.do.
mdx.do provides a simple API endpoint. You send an MDX string to the service, and it returns a compiled, ready-to-render React component, along with any frontmatter metadata. This offloads the entire resource-intensive compilation process from your application's build environment or server.
While you can compile MDX on your own server, it adds complexity and dependencies to your backend. Using mdx.do is ideal for dynamic content scenarios where you want to avoid managing that infrastructure. It's purpose-built for:
Frontmatter is metadata (like a title, author, or tags) written in languages like YAML at the very beginning of a Markdown or MDX file. mdx.do automatically parses this for you and returns it as a structured JSON object, making it incredibly easy to use this data to populate page titles, author bylines, and more.
The modern web demands dynamic experiences. By unchaining MDX from the static build process, mdx.do provides a critical piece of infrastructure for building next-generation content workflows.
Ready to transform your content? Head over to mdx.do to explore the API and start compiling dynamic MDX content in minutes.