Dox - Gatsby Theme

Dox is a Gatsby theme that transforms a folder of Markdown and MDX files into a documentation website with a built-in sidebar, navbar, and syntax-highlighted code blocks.

What is Dox?

Dox is a Gatsby theme created by MunifTanjim for building documentation sites. It takes Markdown and MDX content from a configurable content directory and outputs a static documentation website with navigation and theming. The theme is installed as an npm package and added to a Gatsby site's plugin list.

Key Features

• MDX support — Write documentation pages as Markdown with embedded JSX components via gatsby-plugin-mdx.
• Theme UI support — Style the site using the Theme UI design system, which provides customizable design tokens.
• Syntax Highlighting — Code blocks are highlighted out of the box, which the README lists as a built-in feature.
• Navigation components — A navbar, sidebar, and footer are included, giving documentation sites standard page layout.
• Responsive design — The theme is fully responsive across desktop and mobile devices.

Who is it for?

• Open-source maintainers — Publish project documentation from a docs folder without hand-building site navigation.
• Technical writers — Author documentation in Markdown or MDX and get a styled, navigable site with no separate frontend work.
• Gatsby developers — Users who want a theme-based approach to docs sites, reusing the theme across projects and overriding options.

What can you do with Dox?

• Product documentation: Turn a content/docs directory of Markdown files into a public documentation site with a sidebar menu.
• API reference sites: Use MDX to embed interactive code samples or React components directly in API reference pages.
• Knowledge bases: Set a custom basePath to host documentation at a sub-path like /docs on an existing Gatsby site.

How does Dox work?

After installing with npm install --save gatsby-theme-dox or yarn add gatsby-theme-dox, add gatsby-theme-dox to the plugins array in gatsby-config.js. The theme reads documentation files from content/docs by default and generates pages under the root URL. You can pass an options object to change basePath and contentPath, or set mdx: false if your site already configures gatsby-plugin-mdx.

Theme configuration options

The README documents three options: basePath (default /) sets the root URL for the documentation site; contentPath (default content/docs) sets the location of documentation files; and mdx (default true) configures the gatsby-plugin-mdx plugin — set it to false if your site already uses MDX.

FAQ

Is Dox free to use?

Yes, the theme is open-source and publicly available on GitHub. You can install it from the npm registry and use it in your own projects without a license fee.

How do I change the content directory?

Pass a contentPath option in the plugin configuration, for example contentPath: 'docs' to read files from docs instead of content/docs.

Does Dox support MDX components?

Yes, MDX support is a listed feature. The theme enables gatsby-plugin-mdx by default; if your site already sets up MDX, set the mdx option to false to avoid duplication.

What happens if I set the mdx option to false?

When set to false, Dox skips configuring gatsby-plugin-mdx, so you must provide your own MDX plugin configuration in the Gatsby site.