Enhancing Developer Experience with MDX and .do

MDX has revolutionized how we think about content. By blending the simplicity of Markdown with the interactive power of JSX, it allows developers and content creators to build richer, more dynamic web experiences. From interactive charts in a blog post to complex UI components in documentation, MDX bridges the gap between static text and dynamic applications.

However, harnessing this power often comes with a cost: complexity. Setting up local build environments, managing dependencies, and configuring bundlers like Webpack or Rollup to process MDX can be a significant hurdle, slowing down development and bloating projects.

What if you could get all the benefits of MDX without the complex setup? What if you could transform content on demand with a simple API call?

Enter mdx.do, an AI-powered agent designed to streamline your content workflow.

The Challenge with Traditional MDX Workflows

If you've worked with MDX, you're likely familiar with the setup process. You need to install a series of packages (@mdx-js/loader, @mdx-js/react), configure your build tool to recognize .mdx files, and ensure your entire toolchain plays nicely together.

This approach works well for traditional static site generation, but it has drawbacks:

• Heavy Dependencies: Your project becomes laden with compilation-related dependencies that are only needed at build time.
• Slow Builds: Processing a large number of MDX files can significantly increase build times.
• Inflexibility: What if you need to render MDX content fetched dynamically from a CMS or user input? Running a full build process for a single piece of content is impractical and inefficient. This is a common problem for serverless functions and dynamic content platforms.

These challenges create friction and distract from the core task: creating great content.

Compile. Render. Repeat. The mdx.do Way

mdx.do reimagines the MDX workflow by moving the compilation and rendering process to a scalable cloud service. It's an AI agentic workflow that you can access via a simple API, abstracting away all the underlying complexity.

Instead of wrestling with local configurations, you can transform MDX content on demand.

Here’s how easy it is to use mdx.do to compile an MDX string into a JavaScript function body:

import { mdx } from ".do";

// Compile an MDX string into a function body
const { code } = await mdx.compile({
  content: `
# Hello, world!

This is MDX. You can write **markdown** and use <Component />.
`,
});

console.log(code);
// Returns the compiled JavaScript code ready for evaluation.

With one API call, you get back executable JavaScript code, completely bypassing the need for a local build environment.

Unlock Flexibility and Power with a Simple API

mdx.do is more than just a remote compiler; it's a flexible tool designed to fit into modern web architectures.

Flexible Output Formats

The agent supports two primary output formats, giving you the flexibility to choose the right one for your use case:

1. Compiled Function Body (JavaScript): As seen in the example above, you can get the raw, compiled JavaScript code. This is perfect for dynamic execution in any frontend framework (like React, Preact, or Vue) where you want to pass in your own custom components at runtime.
2. Static HTML: Need to quickly display content without a JavaScript framework? The agent can also render the MDX directly into static HTML. This is ideal for content previews, email generation, or integration with systems that don't use JSX.

Ditch the Dependencies

By offloading compilation to the mdx.do agent, you can dramatically slim down your project. No more webpack loaders or babel plugins for MDX. Your application only needs to make a simple fetch call. This is a game-changer for serverless functions, where deployment package size is a critical concern.

Use Your Own Components

MDX is all about custom components. mdx.do is designed to be extensible. You can configure the compilation environment to recognize and render your custom React components, just as you would in a local development setup. This ensures you never have to sacrifice the rich interactivity that makes MDX so powerful.

Where mdx.do Shines: Top Use Cases

The agentic workflow of mdx.do is particularly well-suited for:

• Headless CMS & Dynamic Content Platforms: Effortlessly render MDX content fetched from a CMS without bundling a compiler with your server or client.
• Serverless Functions: Build lightweight, fast-executing functions on platforms like Vercel or Netlify that can process and render MDX on the fly.
• Interactive Documentation: Allow users to write and preview MDX in a live editor by processing their input through the API.
• Static Site Generators (SSGs): Speed up local builds by offloading MDX compilation, or fetch and render dynamic MDX content on the client after the initial site has been built.

Get Started Today

MDX offers a superior authoring experience, and mdx.do makes it easier than ever to integrate it into any project. By abstracting the complex compilation process into a simple, powerful API, you can focus on what truly matters—building compelling, dynamic, and interactive content.

Ready to transform your content workflow? Head over to mdx.do to explore the documentation and start building with the power of MDX on demand.