MDX has fundamentally changed how developers think about content. By allowing us to seamlessly write JSX and import React components directly within Markdown, it bridges the gap between static documents and dynamic applications. We can create richer, more interactive articles, documentation, and digital experiences than ever before.
But for all its power, the traditional MDX workflow has a significant limitation: it's almost exclusively tied to a static build step. You write your .mdx file, run a build command with a tool like Next.js or Gatsby, and your content is pre-compiled into JavaScript. This is perfect for personal blogs and product documentation, but what happens when your content isn't static?
What if your content is generated by users? Or pulled from a headless CMS? Or personalized for every visitor? Re-running a full site build for every content change is inefficient and often impossible. This is the static build bottleneck.
Enter a new paradigm: dynamic MDX compilation as a service. Welcome to mdx.do.
The static site generation (SSG) model is powerful but rigid. The workflow looks like this:
This process breaks down when content needs to change on-the-fly. Consider these scenarios:
mdx.do frees your content from the constraints of the build step. It’s a simple, powerful API designed to do one thing exceptionally well: compile and render MDX strings on demand.
Instead of compiling content when you build your site, you compile it when you need it. You send an MDX string to the mdx.do API, and it returns a ready-to-render React component and its parsed frontmatter. No complex dependencies, no cumbersome build steps—just a simple API call.
Integrating with mdx.do is incredibly straightforward. Using the official SDK, you can transform content in just 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.
Let's break down the response:
By moving compilation to an on-demand service, you unlock workflows that were previously impractical.
Build a "what you see is what you get" editor for your headless CMS. As a content editor types, send the MDX string to mdx.do and render the response in a preview pane instantly. This creates a lightning-fast feedback loop.
Empower your users to create rich profiles, posts, or comments using MDX. You can safely compile their input on the server-side via the API and render it in your application, opening the door to powerful community-driven platforms.
Store variants of your landing page copy or promotional content in a database. When a user visits, fetch the appropriate MDX string, compile it with mdx.do, and serve a personalized, component-rich page without needing separate static builds.
Create interactive tutorials where users can write MDX and see it render in real-time. Offloading the compilation to an API keeps your client-side application light and performant.
Q: What is MDX?
A: MDX is an authorable format that lets you seamlessly write JSX in your Markdown documents. It's a powerful way to embed interactive components directly within your content, transforming static documents into rich applications.
Q: Why use mdx.do instead of a local library?
A: Using mdx.do is ideal for dynamic content scenarios where you can't rely on a static build step. It's perfect for user-generated content, CMS-driven pages, or any situation where you need to compile MDX on-demand without bloating your own server or client with compilation logic.
Q: How does mdx.do work?
A: 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 compilation process from your application's environment.
The static web has served us well, but the future of content is dynamic, interactive, and personalized. mdx.do is a key utility in building that future, providing the missing link between powerful MDX authoring and the demands of modern web applications.
Ready to break free from the build step? Explore mdx.do and revolutionize your content workflow today.