MDX
Markdown with JSX components in Manic.
MDX
Integrates MDX (Markdown with JSX) support for rich content pages in Manic.
Installation
bun add @manicjs/mdxQuick Start
1. Configure
// manic.config.ts
import { } from 'manicjs/config';
declare function (?: <string, unknown>): { : string };
export default ({
: [()],
});2. Create MDX Content
# Hello World
This is **Markdown** with React components.
<Counter initial={5} />Options
Prop
Type
GFM Support
GFM is enabled by default. Set disableGfm: true to turn it off.
| Feature | Support |
|---|---|
| Tables | ✓ |
| Task lists | ✓ |
| Strikethrough | ✓ |
| Autolinks | ✓ |
| Footnotes | ✓ |
Frontmatter
Frontmatter parsing is enabled by default. The parsed YAML is exported as a named export (default name frontmatter):
---
title: My Post
date: 2024-01-15
author: John Doe
tags: [react, manic]
---
# {frontmatter.title}
Written by {frontmatter.author}You can change the export name with frontmatterName:
declare function (?: <string, unknown>): { : string };
({ : 'metadata' })Then access it as {metadata.title} in your MDX, or import it from another file:
declare const : { : string };Set disableFrontmatter: true to disable frontmatter extraction entirely.
Using Components
Import and use React components in MDX:
import { Callout } from '~/components/Callout';
# Installation
<Callout type="info">
Follow these steps to install...
</Callout>Table of Contents
Enable TOC extraction with toc: true. This uses fumadocs-core to export a toc array from each MDX file:
// manic.config.ts
import { } from 'manicjs/config';
declare function (?: <string, unknown>): { : string };
export default ({
: [
({
: true,
}),
],
});Then import toc directly from the MDX file:
declare const : <{ : number; : string; : string }>;
// toc is an array of heading objects:
// [{ depth: 1, url: '#introduction', title: 'Introduction' }, ...]Syntax Highlighting
Syntax highlighting is opt-in via rehype-pretty-code. Enable it with highlight: true for the default github-light / github-dark themes:
declare function (?: <string, unknown>): { : string };
({
: true,
})Or pass custom theme names:
declare function (?: <string, unknown>): { : string };
({
: { : 'min-light', : 'night-owl' },
})```ts
const greeting = 'Hello';
console.log(greeting);
```Custom Remark/Rehype Plugins
The mdx() plugin function serializes options to an environment variable so the Bun preload script can read them. This means function values like remark/rehype plugin arrays cannot be passed through mdx().
To add custom remark or rehype plugins, use mdxBunPlugin() from @manicjs/mdx/bun-plugin directly and register it as a Bun plugin:
// plugins/my-mdx.ts
import { } from 'bun';
import { } from '@manicjs/mdx/bun-plugin';import from 'remark-math';import from 'rehype-katex';
(
({
: true,
: true,
: [],
: [],
}),
);Then register this file as a preload in your bunfig.toml:
[serve.static]
plugins = ["./plugins/my-mdx.ts"]When using mdxBunPlugin() directly, you do not need the mdx() Manic plugin in your config — the Bun plugin handles everything.