Markdown is the undisputed champion for writing content on the web. It's simple, readable, and powers everything from GitHub readmes to personal blogs. But what happens when you need more than static text? What if you want to embed a custom, interactive chart, a dynamic data table, or a newsletter signup form directly into your article?
Traditionally, this meant abandoning the simplicity of Markdown and wrestling with complex HTML or building a full-blown JavaScript application. This is the gap where MDX shines.
MDX is a superset of Markdown that allows you to write JSX directly within your content. It seamlessly merges the elegance of Markdown with the power of interactive React components.
# My Latest Article
Here's some standard analysis...
<MyInteractiveChart type="line" data={...} />
...and here's the conclusion.
The potential is huge, but implementing MDX often comes with a hidden cost: a complex and fragile build setup. You need to configure bundlers like Webpack or Vite, manage multiple dependencies, and ensure everything plays nicely with your framework.
What if you could get all the power of MDX with none of the setup headaches?
mdx.do is a powerful MDX compilation platform delivered via a simple API. We handle the complex build process on our servers, so you can focus on what matters: creating amazing content.
Think of it as Headless MDX. You send us your raw MDX source, and we return compiled, ready-to-render code or static HTML. It’s the perfect way to bring interactive components to your content, regardless of your tech stack.
With mdx.do, compiling dynamic content is as easy as making an API call within our agentic workflow platform. No local dependencies, no build configuration.
Let's look at how you can compile a string of MDX source that includes a custom chart component.
import { mdx } from '.do';
// Your content, mixing Markdown and JSX
const mdxSource = `
# Hello, world!
Welcome to the future of content. Check out this live chart!
<MyChart type="line" data={...} />
`;
// Compile it with a single command
const { html, code } = await mdx.compile({
source: mdxSource,
components: { MyChart },
options: {
mdxOptions: {
// Extend with powerful plugins
remarkPlugins: [remarkGfm]
}
}
});
// Now you can use the 'html' for static sites
// or the 'code' to hydrate in a React app.
In this example, mdx.do takes your source, understands that <MyChart /> is a component you want to render, processes the Markdown with plugins like remark-gfm (for GitHub Flavored Markdown), and returns the final output. The heavy lifting is done, and you get pure, performant content back.
Offloading your MDX compilation offers several key advantages over a local setup.
Framework-Agnostic: Our API is designed to work everywhere. Whether you're using Next.js, Astro, Vue, Svelte, or a custom static site generator, you can consume the output. Just provide the MDX, and we provide the executable code or HTML.
Simplified Workflow: Say goodbye to wrestling with webpack.config.js or vite.config.ts. The mdx.do agent handles the entire compilation toolchain, including core MDX libraries, plugins, and optimizations.
Server-Side Power: By compiling on the server via an API, you keep your client-side bundles small and your site fast. This is crucial for performance and SEO. Fetch fully-rendered, interactive content on demand without bloating your application.
Extensible and Customizable: Power-users aren't left behind. As shown in the code example, you can pass an array of remark and rehype plugins in your API call. This allows you to add features like automatic table of contents, advanced syntax highlighting, image optimization, and more.
Q: What exactly is MDX?
A: MDX is a format that lets you write JSX (the syntax used by React) directly inside your Markdown files. It allows you to embed interactive components within your static content seamlessly.
Q: Why would I use mdx.do instead of a local library?
A: mdx.do provides a simple Agentic API to handle the compilation of MDX content on the server. This offloads complex build processes from your client, speeds up your site, and allows you to fetch fully-rendered, interactive content on demand, perfect for any framework or environment.
Q: Can I use mdx.do with my existing frontend framework?
A: Yes. Our API is framework-agnostic. You provide the MDX source, and mdx.do returns the compiled code or static HTML. You can then use this output with React, Next.js, Astro, Vue, Svelte, or any other library that can render JSX or HTML.
Q: Does mdx.do support remark and rehype plugins?
A: Absolutely. You can pass an array of remark and rehype plugins in your API call to mdx.do. This allows you to extend Markdown syntax, add table of contents, implement syntax highlighting, and perform countless other content transformations.
Stop letting build tools get in the way of creating rich, interactive content. With mdx.do, you can leverage the full power of MDX with the simplicity of an API call.
Ready to revolutionize your content? Visit mdx.do to explore the API and start compiling.