In the world of modern web development, content is king. But what if your content could do more than just sit there? What if it could be interactive, dynamic, and truly alive? This is the promise of MDX, the format that lets you write JSX directly in your Markdown. The roadblock, however, has always been the build step. Traditionally, compiling MDX is a process tied to your static site generator or framework's build pipeline.
But what about dynamic content? User-generated posts? Content pulled from a headless CMS after your site has been deployed?
Enter mdx.do, a powerful service that transforms MDX compilation from a static build-time task into a simple, on-demand API call. Let's explore how you can leverage mdx.do to revolutionize your content workflows.
Before we dive into the API, let's quickly recap what makes MDX so special. MDX is an authorable format that lets you seamlessly write JSX in your Markdown documents. Imagine writing a blog post and, right in the middle of a paragraph, embedding a live chart, an interactive poll, or a custom React component.
# My Monthly Report
Here's our progress for the month. As you can see from the live data below, our user engagement is up by 25%!
<LiveChart endpoint="/api/data/engagement" />
This growth is phenomenal.
This ability to weave application-like functionality directly into static content is a game-changer. It transforms documents into rich, interactive experiences.
The power of MDX is undeniable, but its traditional implementation has a significant limitation: it relies on a local library and a build step. Tools like Next.js and Gatsby are fantastic at processing your local .mdx files when you build your site.
This works perfectly for content you control in your repository. But it falls short for dynamic scenarios:
Running a full MDX compilation environment on the client-side is heavy and complex. Running it on your server adds dependencies and infrastructure overhead. This is the exact problem mdx.do was built to solve.
mdx.do provides a simple API endpoint that decouples MDX compilation from your application's environment. The concept is beautifully simple:
You send an MDX string to the service, and it returns a compiled, ready-to-render React component.
No complex build steps. No local dependencies. Just a simple API call.
Let's see just how easy it is. Using the official @do-sdk/mdx helper library, you can compile content with 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 this down:
You can now use this component directly in your React application. To render the custom LiveComponent, you simply pass it into the components prop, a standard feature of MDX renderers.
import React from 'react';
// This would be your own custom component
import { LiveComponent } from './MyComponents';
function MyPage({ compiledComponent, frontmatter }) {
// Get the component from the mdx.do API response
const MdxContent = compiledComponent;
return (
<article>
<h1>{frontmatter.title}</h1>
<p>By: {frontmatter.author}</p>
<hr />
<MdxContent components={{ LiveComponent }} />
</article>
);
}
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: 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 compilation process from your application's build environment.
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. Perfect for user-generated content, CMS-driven pages, or any situation where you need to compile MDX on-demand.
Q: What is frontmatter?
A: Frontmatter is metadata (like title, author, or tags) written in languages like YAML at the beginning of a Markdown or MDX file. mdx.do automatically parses this for you and returns it as a structured JSON object alongside your component.
The mdx.do API unlocks a new paradigm for content management in React applications. By shifting compilation to an on-demand service, you can build more dynamic, interactive, and flexible user experiences without the overhead of build pipelines or complex server-side dependencies.
Ready to transform your content workflow? Dive into the documentation and get started with mdx.do today.