MDX has revolutionized how we think about content. By blending the simplicity of Markdown with the power of React's JSX, it allows developers and content creators to build rich, component-driven experiences that go far beyond static text. Interactive charts, dynamic data displays, and custom-styled components can live right inside your articles and documentation.
But this power has traditionally come with a catch: a build step. To turn your MDX into something a browser can understand, you needed to integrate it into a build process with tools like Webpack or Vite. This is great for content that's part of your codebase, but it's a significant roadblock for dynamic content—the kind that comes from a headless CMS, a database, or user input.
What if you could skip the complex build setup entirely? What if you could compile MDX content on the fly, whenever you needed it? This is the promise of server-side compilation, and it's a paradigm shift for creating dynamic web experiences.
In a typical setup with frameworks like Next.js or Gatsby, your .mdx files are treated like source code. When you run your build command (npm run build), your bundler finds these files, processes them, and outputs static HTML and JavaScript.
This workflow is robust, but it has limitations:
This friction means the full potential of MDX—as a truly dynamic CONTENT AS CODE format—often goes unrealized.
This is where mdx.do changes the game. It's a simple API service designed for one purpose: to dynamically compile MDX content into executable React components in real-time.
Instead of processing MDX files during a local build, you send the raw MDX string to the mdx.do API. The service handles the compilation on its optimized servers and returns the JavaScript code needed for rendering.
Here’s how simple it is:
import { mdx } from ".do";
const mdxContent = `
# Hello, MDX!
This is a JSX component rendered from a string:
<MyCustomComponent title="Welcome" />
Expressions are easy: {2024 - 1984} years have passed.
`;
// Compile the MDX string into executable code via an API call
const { code, frontmatter } = await mdx.compile(mdxContent);
// `code` can now be safely evaluated and rendered
// in your React application using a library like next-mdx-remote.
With one API call, you've transformed a raw string—which could have come from anywhere—into a renderable component. You've completely decoupled your content from your build process.
This server-side approach opens up a world of possibilities that were previously complex or impractical.
Your marketing team can now write MDX content directly into a headless CMS like Contentful, Strapi, or Sanity. Your application fetches this content at request time, sends it to mdx.do for compilation, and renders the rich, interactive result instantly. No builds, no delays.
Build documentation sites where the content is stored in a database. This allows for easier updates, versioning, and even collaborative editing. The MDX for each page is compiled on the fly, so your documentation always reflects the latest information.
Empower yourself or your users to write blog posts that are more than just text and images. Embed interactive examples, data visualizations, or newsletter signup forms directly within the content, all powered by your existing React component library.
If you're building a tool that lets users create content, you can use mdx.do to provide a live preview. As the user types their MDX, you can send it to the API and render the output in real-time, creating a seamless and interactive editing experience.
MDX is a superset of markdown that lets you write JSX directly in your markdown files. It's a powerful way to add dynamic interactivity and use your React components right alongside your text-based content.
Absolutely. mdx.do handles the compilation, but you control the rendering. The API compiles your MDX, acknowledging the custom components you've used (like <MyCustomComponent />). In your front-end, you provide the actual component implementations in a "scope" when you render the compiled code. This gives you full control over the final output.
The key difference is when and where the compilation happens. A local build processes files on your machine before deployment. mdx.do processes raw MDX strings on a remote server whenever you ask it to, making it ideal for content that isn't known at build time.
Server-side MDX compilation isn't just a technical convenience; it's a fundamental shift towards a more dynamic and powerful web. By breaking free from the build-time constraint, you can treat content as a first-class citizen—data that can be fetched, transformed, and rendered from any source, at any time.
Tools like mdx.do simplify this process down to a single API call, removing the need for complex server infrastructure and bundler configs. If you're ready to unlock the full potential of component-driven content and deliver richer experiences with less overhead, it's time to explore the power of MDX-on-the-fly.