User-generated content (UGC) is the lifeblood of the modern web. From comments and forum posts to detailed user profiles and collaborative documents, it fosters community and engagement. But let's be honest: most UGC is static. We're often limited to plain text or basic Markdown, leaving a massive gap between the content our users want to create and the tools we give them.
What if your users could embed interactive charts, live data components, or custom-styled elements directly into their posts? This is the promise of MDX—a powerful format that lets you write JSX directly in Markdown.
The traditional challenge, however, has always been compilation. MDX is typically compiled at build time, which works great for your own content but fails for content that arrives dynamically from a user.
Enter mdx.do, a service designed to break down this barrier. It provides a simple API to compile MDX strings into React components on-the-fly, transforming how we think about user-generated content.
Before we dive into the creative use cases, let's see how simple it is to compile dynamic content with mdx.do. Instead of complex local build steps, you just make an API call:
import { mdx } from '@do-sdk/mdx';
// This MDX string could come from a database, a CMS, or user input
const userGeneratedContent = `
---
title: My Awesome Profile!
theme: 'dark'
---
# Hello, World!
This is my profile. I love building with React.
Check out my latest project! <YouTubeEmbed videoId="dQw4w9WgXcQ" />
`;
// Compile it on demand
const { component, frontmatter } = await mdx.compile({
content: userGeneratedContent
});
// `component` is now a React component you can render.
// `frontmatter` is a JSON object: { title: 'My Awesome Profile!', theme: 'dark' }
With mdx.do handling the heavy lifting, you unlock a new frontier of interactive experiences. Here are five creative ways to leverage it.
The Problem: User bios are boring. A "Bio" field is usually a plain text area that robs users of personality and creativity.
The MDX Solution: Allow users to build their profiles using MDX. By providing them with a curated set of components, you can empower them to create rich, dynamic pages that truly represent them.
Imagine a user crafting their bio:
---
name: 'Jane Doe'
role: 'Frontend Developer'
---
Hey, I'm Jane! I specialize in React and design systems.
### My GitHub Stats
<GitHubStats username="janedoe" />
### Currently Listening To
<SpotifyTrack id="spotify:track:11dFGHACaxhVEpurrPUyF7" />
Feel free to connect with me on <SocialLink platform="twitter" user="janedoe" />.
With mdx.do, you can take this string from your database, compile it, and render a beautiful, interactive profile page on demand.
The Problem: Forum discussions and blog comments lack richness. Complex ideas get lost in flat text, and engagement suffers.
The MDX Solution: Elevate discussions by allowing users to embed interactive elements in their posts. This could turn a simple comment section into a dynamic exchange of ideas.
Consider these possibilities for a single post:
A user could respond to a technical article with:
Great article! I ran into a small issue with the sorting algorithm. Here's a version that handles edge cases better:
<CodeBlock language="js" showLines>
// My improved sorting function...
</CodeBlock>
What does everyone think of this approach?
<Poll options={['Better', 'Worse', 'Same']} />
The Problem: Tools like Confluence or internal wikis often feel disconnected from the actual work. Documentation quickly becomes outdated because it's separate from the source of truth.
The MDX Solution: Use mdx.do as the rendering engine for a collaborative, living documentation platform. Empower your team to create documents that pull in real-time data.
An engineering team could create a project page that includes:
# Project Phoenix: API Documentation
This document outlines the core services for Project Phoenix.
### User Service Status
The service is currently: <ServiceStatus serviceId="user-api" />
### Key Endpoints
You can test the primary endpoint here.
<LiveApiExplorer endpoint="/api/v1/users" />
### Open Tasks
<JiraTaskList project="PHX" status="Todo" />
Because mdx.do compiles this on each view, the status badges, API explorers, and task lists are always up-to-date.
The Problem: Product pages on marketplaces are often rigid templates. Vendors can't adequately showcase unique or complex products with just images and text.
The MDX Solution: Give vendors the power of MDX to build their product pages. By providing a safe, sandboxed environment with components you control, they can create compelling and interactive sales pitches.
A vendor selling a high-tech camera could create a description like this:
---
price: 2499.99
sku: 'CAM-PRO-X1'
---
# The Professional X1 Camera
Experience photography like never before.
### 360° Product Viewer
<Product360Viewer imageSet="pro-x1-images" />
### Sizing and Dimensions
Not sure if it fits in your bag? Use our interactive guide.
<SizeCalculator dimensions={{ w: 15, h: 10, d: 8 }} />
### Video Testimonials from Pro Photographers
<YouTubePlaylist playlistId="PL... "/>
The Problem: Personal blogs built with static site generators are fast, but they can feel rigid. Creating connections between notes or embedding dynamic content often requires complex plugins or custom code.
The MDX Solution: A developer could build a "digital garden" where their notes are stored as MDX strings in a database. Using mdx.do, they can render these notes on a server and include powerful, custom components.
A blog post could feature:
# My Thoughts on Web Components
Web Components are an interesting technology. They promise true encapsulation, but I've found a few trade-offs.
One of the coolest things is how they work with React.
<ReactComponentInMarkdown />
You can also link to other thoughts in my garden, and a preview will be automatically generated.
<NoteLink slug="state-management-2024" />
NoteLink could be a custom component that fetches metadata for another post from the database and displays it as a rich preview card—all rendered server-side at request time.
MDX has always been a powerful tool for developers, but its reliance on a build step has limited its use for dynamic, user-driven content.
With mdx.do, that limitation is gone. By offering MDX compilation as a simple, on-demand service, you can finally build the rich, interactive, and engaging user-generated content experiences you've always imagined.
Ready to transform your content workflows? Get started with mdx.do today!
What is MDX?
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.
How does mdx.do work?
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.
Why use mdx.do instead of a local library?
Using mdx.do is ideal for dynamic content scenarios where you can't rely on a static build step. It's perfect for user-generated content, CMS-driven pages, or any situation where you need to compile MDX on-demand without managing complex server-side dependencies.
What is frontmatter?
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.