MDX has revolutionized how developers blend documentation and interactive components, offering a powerful way to build rich content experiences. But what if you need to go beyond the basics? What if you want to automatically add a table of contents, optimize images, or even fetch external data to embed directly in your MDX? This is where the true power of MDX processing, especially with tools like those offered by mdx.do, comes into play.
At its core, MDX lets you write JSX within Markdown. This is fantastic for embedding components and adding interactivity. However, real-world content workflows often require more than just embedding. You need to process, transform, and enhance your content automatically and programmatically.
Think about these common scenarios:
These tasks, and many more, can be automated and streamlined using MDX processing tools and the power of remark and rehype plugins.
mdx.do provides the libraries, tools, and utilities you need to take control of your MDX processing pipeline. Whether you're looking to apply standard transformations or build highly custom workflows, mdx.do offers the flexibility and power to achieve your goals.
With mdx.do, you can:
The core of mdx.do's power lies in its ability to seamlessly integrate with and leverage the vast ecosystem of remark and rehype plugins.
Remark and rehype plugins work by manipulating the Abstract Syntax Tree (AST) of your Markdown and HTML respectively. This allows you to programmatically inspect, modify, and transform your content before it's rendered.
Here's a simple example of how you might use a remark plugin with mdx.do (using a conceptual example similar to the library's capabilities):
In this example, remarkPluginExample would be a function that modifies the MDX AST according to its logic (e.g., adding a class to headers, inserting a node, etc.). The processMDX function from mdx.do orchestrates the application of these plugins.
Want to add a Table of Contents? There are remark plugins for that. Need to optimize images using a specific service? Rehype plugins can handle that. The possibilities are virtually endless.
mdx.do is designed to be easily integrated into your existing content pipeline. Whether you're using a static site generator, a custom server, or a headless CMS, mdx.do's flexible APIs and SDKs make it straightforward to add powerful MDX processing capabilities.
By leveraging mdx.do, you can save significant development time, improve the quality and consistency of your content, and create more dynamic and engaging user experiences.
What is mdx.do?
mdx.do provides libraries, tools, and a platform for processing, transforming, and enriching your MDX content programmatically. This simplifies complex workflows around content management and rendering.
How can I use mdx.do to enhance my content workflows?
You can use mdx.do to automate tasks like applying custom remark and rehype plugins, fetching external data to embed in MDX, analyzing content structure, and converting MDX to other formats.
Is mdx.do easy to integrate with existing tools?
mdx.do is built to integrate easily with your existing content pipelines and development workflows, offering flexible APIs and SDKs.
If you're working with MDX and looking for ways to automate processing, integrate data, or create highly customized content outputs, explore what mdx.do has to offer. Unlock the full potential of your content and streamline your development workflow.
import { remarkPluginExample } from '@mdx-do/plugins';
const mdxContent = `# Hello, MDX!
This is some content.`;
const processedMDX = await processMDX(
mdxContent,
{
remarkPlugins: [remarkPluginExample],
rehypePlugins: [] // Add rehype plugins here as well
}
);
console.log(processedMDX); // Output the transformed MDX