# Interactive Documentation with MDX

> Write documentation with embedded React components, live code examples, and semantic metadata. Compile at the edge with no build step required.

Canonical: https://mdx.do/

## In code

```ts
import { MDX } from 'mdx.do'

// Compile MDX at the edge with custom components
on.Documentation.requested($ => {
  const content = $.Content.get.MDX({ slug: $.Request.params.slug })

  // Compile with React components
  const compiled = MDX.compile(content, {
    components: { CodeBlock: InteractiveCodeBlock, Chart: DataVisualization }
  })

  return $.Response.cached({ html: compiled, ttl: '1h' })
})
```

## Frequently asked questions

### What makes MDX better than regular Markdown?

MDX lets you embed React components directly in Markdown for interactive code examples, live API calls, data visualizations, and custom UI with full TypeScript support. Standard Markdown is static—MDX is dynamic and programmable with reusable component libraries.

### How fast is MDX compilation at the edge?

MDX.do compiles MDX in <50ms P99 at the edge with zero build step for instant previews and compiled output cached at 300+ edge locations globally. Incremental compilation and parallel processing mean typical 100-page docs sites compile in <5 seconds total.

### Can I use custom React components in MDX?

Yes, define custom components for code blocks, alerts, charts, API explorers, and any React component with full TypeScript types. Use component libraries like Chakra UI, Material UI, or Radix, and all components server-render at the edge for SEO.

### How do you handle syntax highlighting and code examples?

Automatic syntax highlighting for 200+ languages using Prism or Shiki with copy-to-clipboard, line highlighting, and diff highlighting built-in. Live code examples support runnable JavaScript/TypeScript with CodeSandbox, StackBlitz, or custom playgrounds embedded.

### Can AI generate and update MDX documentation?

Yes, AI agents can generate MDX from API specs (OpenAPI/GraphQL), code repositories, or natural language descriptions with automatic updates when APIs change. AI respects MDX component syntax and generates valid, compilable content with frontmatter metadata.

## Part of Platform.do

mdx.do is one of the primitives of Platform.do, in the Data layer (records, vocabulary and search). Every .do shares one grammar, Business-as-Code, and one SDK.

- What is Business-as-Code? https://platform.do/business-as-code
- Platform.do: https://platform.do/
- Docs: https://docs.platform.do