Advanced

By default, createApp() renders a full docs site with a top bar and side navigation. For cases where you want to bring your own shell — or embed the content area inside an existing layout — you can use DocsProvider and MDXContent directly.

DocsProvider

DocsProvider is the React context provider that makes your pages and site config available to all mdx-docs components. It must wrap anything that uses MDXContent.


jsx
import { DocsProvider } from '@quietmind/mdx-docs'

Prop	Type	Required	Description
`pages`	`Page[]`	Yes	Array of page objects (same shape as `createApp`)
`site`	`object`	Yes	Site config with `name` and `description`
`hideHomeFromNav`	`boolean`	No	Hide the home route from navigation (default: `false`)
`footer`	`object`	No	Footer config: `{ enabled, content }` (`enabled` defaults to `true`)

Footer

Every site renders a minimal "Built with MDX Docs" footer below the content. It is enabled by default. Set footer: { enabled: false } to remove the footer entirely:


jsx
createApp({
  pages,
  site,
  footer: { enabled: false },
})

To render your own footer instead of the default attribution, pass a content node:


jsx
createApp({
  pages,
  site,
  footer: { content: <p>Made with care by Your Team.</p> },
})

MDXContent

MDXContent renders the routed MDX content area. It reads pages from the nearest DocsProvider and sets up React Router <Routes> for each page. It must be rendered inside both a DocsProvider and a React Router context.


jsx
import { MDXContent } from '@quietmind/mdx-docs'

MDXContent takes no props.

Custom layout example

Use these two components together to render just the content area inside your own layout:


jsx
import { BrowserRouter } from 'react-router-dom'
import { DocsProvider, MDXContent } from '@quietmind/mdx-docs'
import '@quietmind/mdx-docs/index.css'

import pages from './config/pages'
import site from './config/site'

export default function App() {
  return (
    <DocsProvider pages={pages} site={site}>
      <BrowserRouter>
        <MyTopBar />
        <MySideNav />
        <main>
          <MDXContent />
        </main>
      </BrowserRouter>
    </DocsProvider>
  )
}

MDXContent does not include any MUI ThemeProvider. If you are using MUI components in your own layout or MDX pages, wrap the tree in a ThemeProvider before rendering MDXContent.

Sitemap generation

MDX Docs can generate a sitemap.xml during production builds. Add an absolute url to config/site.js to enable sitemap output and per-page canonical metadata:


js
export const site = {
  name: "My Site",
  description: "My site description",
  url: "https://docs.example.com",
};

When url is set, yarn build writes a sitemap.xml that includes every prerendered route:


none
dist/sitemap.xml

Each page URL is built from the site URL and the page route. For example, a page registered at /getting-started appears as:


xml
<url>
  <loc>https://docs.example.com/getting-started</loc>
</url>

Pages can opt out of the generated sitemap with excludeFromSitemap:


js
export const pages = [
  {
    name: "Internal Notes",
    route: "/internal-notes",
    component: InternalNotesMDX,
    excludeFromSitemap: true,
  },
];

For sites deployed at the domain root, MDX Docs also writes a robots.txt pointing to the generated sitemap:


none
User-agent: *
Allow: /
Sitemap: https://docs.example.com/sitemap.xml

If public/robots.txt already exists, MDX Docs leaves it unchanged. Sites without site.url build normally, but sitemap, canonical URL, and og:url generation are skipped.