Mdx-serializer

Functions

`serializeMdxToMarkdown`

function serializeMdxToMarkdown(mdx: string): string

TypeScript

Use serializeMdxToMarkdown to convert MDX content into plain Markdown, stripping JSX components so the output is portable to any standard Markdown renderer.

Reach for this when you need to export or display documentation outside of an MDX-aware environment — for example, feeding generated docs into a search index, a plain Markdown file, or an LLM prompt where JSX syntax would be noise.

It strips JSX component tags (<CodeGroup>, <Callout>, <Card>, <Tabs>, <Steps>, <Accordion>, <Screenshot>, and others) along with import statements, preserving the underlying text and code content as clean Markdown.

Parameters

Name	Type	Required	Description
`mdx`	`string`	Yes	The raw MDX string to convert — typically the full contents of a `.mdx` file, including any JSX component tags and import statements you want removed.

Returns

Returns a plain Markdown string with all JSX components and import declarations removed. Use the result anywhere that expects standard Markdown: write it to a .md file, pass it to a Markdown parser, or include it in an API payload.

Heads up

Content inside JSX components is preserved where possible, but component-specific formatting (like tab labels or callout icons) is lost — the output prioritizes portability over fidelity.

The function does not validate that the input is well-formed MDX. Malformed JSX tags may produce unexpected output.

Example:

// Inline mock — does NOT import from autodocs
function serializeMdxToMarkdown(mdx) {
  let out = mdx;

  // Remove import statements
  out = out.replace(/^import\s+.*$/gm, '');

  // Strip opening JSX component tags (e.g. <Callout type="warning">)
  out = out.replace(/<[A-Z][A-Za-z]*[^>]*>/g, '');

  // Strip closing JSX component tags (e.g. </Callout>)
  out = out.replace(/<\/[A-Z][A-Za-z]*>/g, '');

  // Collapse multiple blank lines into one
  out = out.replace(/\n{3,}/g, '\n\n').trim();

  return out;
}

const mdxInput = `
import { Callout } from '@/components/callout'
import { CodeGroup } from '@/components/code-group'

# Authentication

<Callout type="warning">
  Always store your API keys in environment variables, never in source code.
</Callout>

Pass your secret key in the \`Authorization\` header:

<CodeGroup>
\`\`\`bash
curl https://api.example.com/v1/users \\
  -H "Authorization: Bearer sk_live_4xKj9mN2pQrT8vWz"
\`\`\`
</CodeGroup>

## Rate Limits

Requests are limited to 1,000 per minute per API key.
`.trim();

try {
  const markdown = serializeMdxToMarkdown(mdxInput);
  console.log('Converted Markdown:\n');
  console.log(markdown);
  // Expected output:
  // # Authentication
  //
  //   Always store your API keys in environment variables, never in source code.
  //
  // Pass your secret key in the `Authorization` header:
  //
  // ```bash
  // curl https://api.example.com/v1/users \
  //   -H "Authorization: Bearer sk_live_4xKj9mN2pQrT8vWz"
  // ```
  //
  // ## Rate Limits
  //
  // Requests are limited to 1,000 per minute per API key.
} catch (err) {
  console.error('Serialization failed:', err.message);
}

TypeScript

MDX Serializer

Mdx-serializer

Functions

serializeMdxToMarkdown

`serializeMdxToMarkdown`