DocumentX
A modern, customizable documentation template for your projects
DocumentX
A modern, customizable documentation template for your projects
DocumentX is open source and is maintained by SinghAstra
DocumentX is a sleek, developer-focused UI documentation system designed for fast, beautiful, and responsive docs — with minimal setup. Whether you're documenting a library, API, or internal tool, DocumentX helps you write, navigate, and share knowledge effortlessly.
To get started with DocumentX UI in your Next.js app:
npm install documentx-ui
# or
yarn add documentx-ui
Here's a recommended folder layout:
/docs
├─ /getting-started.mdx
├─ /components.mdx
└─ /faq.mdx
Each .mdx file will be parsed and rendered using your parser logic and injected with the proper frontmatter for metadata.
DocumentX supports frontmatter for defining title and description metadata per page.
---
title: Introduction
description: Learn how to get started with DocumentX UI.
---
DocumentX uses a robust MDX compiler with plugins for syntax highlighting, automatic headings, and more.
const { content: mdxContent } = await compileMDX({
source: rawMdx,
options: {
parseFrontmatter: true,
mdxOptions: {
rehypePlugins: [
preProcess,
normalizeLanguage,
rehypePrism,
rehypeSlug,
rehypeAutolinkHeadings,
postProcess,
],
remarkPlugins: [remarkGfm],
},
},
components,
});
Using this regex, headings are extracted dynamically from each doc:
const headingsRegex = /^(#{2,4})\s(.+)$/gm;
This enables a smooth scroll experience and a generated ToC.
Wrap your MDX with our <Typography> component to apply global styles:
export function Typography({ children }: PropsWithChildren) {
return <div className="prose prose-invert ...">{children}</div>;
}
Add metadata to your code blocks like file names:
<pre><code title="config.ts" class="language-ts">
export const config = {
darkMode: true,
};
</code></pre>
Our preProcess plugin will extract and attach these:
const preProcess = () => (tree: any) => {
visit(tree, (node) => {
if (node.tagName === "pre") {
const [codeEl] = node.children;
node.raw = codeEl.children?.[0].value;
const meta = codeEl.data?.meta;
const fileMatch = meta?.match(/title=([\w./-]+)/);
node.filename = fileMatch?.[1];
}
});
};
Unsupported languages fallback to plain text:
const normalizeLanguage = () => (tree: any) => {
const supported = new Set(["js", "ts", "tsx", "jsx", "html", ...]);
visit(tree, "element", (node) => {
if (node.tagName === "code") {
const classNames = node.properties?.className;
const lang = classNames?.find((c: string) => c.startsWith("language-"));
if (lang && !supported.has(lang.replace("language-", ""))) {
node.properties.className = ["language-text"];
}
}
});
};
Automatically resolve previous/next pages using:
export function getPreviousNext(path: string) {
// logic to flatten nav and match route
return {
prev: ...,
next: ...
};
}
Generate slugs from heading text:
function getSlug(text: string) {
return text
.toLowerCase()
.replace(/\s+/g, "-")
.replace(/[^a-z0-9-]/g, "");
}
This powers the ToC anchor links and heading navigation.
DocumentX is proudly open-source. Contribute, fork, or give us a ⭐ on GitHub.
Here’s a minimal example of a full .mdx page:
---
title: Example Page
description: A demo of DocumentX UI in action
---
=