Ariadocs

@ariadocs/mdx

Edit on GitHub

Turn MDX files into pages, a table of contents and a sidebar.

pnpm add @ariadocs/mdx

Point it at a folder of .mdx files. For each page you get the rendered content, the frontmatter and the headings. For the folder you get a sidebar, ordered by optional _meta.json files.

import { createDocs } from "@ariadocs/mdx";

const docs = createDocs({ contentDir: "content/docs" });

const page = await docs.parse({ slug: "guides/setup" }); // reads content/docs/guides/setup.mdx
const sidebar = await docs.getNavigation();

MDX can also come from a string, for example from a CMS:

import { parseMdx } from "@ariadocs/mdx";

const page = await parseMdx({ source: textFromCms, blockJs: true });

Entry points

ImportUse it for
@ariadocs/mdxEverything. Server code only.
@ariadocs/mdx/clientMdxClient, in Client Components
@ariadocs/mdx/serverMdxServer on its own
@ariadocs/mdx/pluginsremark and rehype plugins

This package replaces @ariadocs/react. See the migration guide if you're upgrading.