Each page is an MDX file, which combines Markdown content with React components to let you create rich, interactive documentation.

​
Page metadata

Every page starts with frontmatter, the YAML metadata enclosed by --- at the beginning of a file. This metadata defines how your page appears and behaves. Use metadata to control:
  • Page titles and descriptions
  • Sidebar titles, icons, and tags
​
title
string
required
The title of your page that appears in navigation and browser tabs.
​
description
string
A brief description of what this page covers. Appears under the title and improves SEO.
​
sidebarTitle
string
A short title that displays in the sidebar navigation.
​
icon
string
The icon to display.Options:
  • Font Awesome icon name
  • Lucide icon name
  • JSX-compatible SVG code wrapped in curly braces
  • URL to an externally hosted icon
  • Path to an icon file in your project
For custom SVG icons:
  1. Convert your SVG using the SVGR converter.
  2. Paste your SVG code into the SVG input field.
  3. Copy the complete <svg>...</svg> element from the JSX output field.
  4. Wrap the JSX-compatible SVG code in curly braces: icon={<svg ...> ... </svg>}.
  5. Adjust height and width as needed.
​
iconType
string
The Font Awesome icon style. Only used with Font Awesome icons.Options: regular, solid, light, thin, sharp-solid, duotone, brands.
​
tag
string
A tag that appears next to your page title in the sidebar.
Example YAML frontmatter
---
title: "About frontmatter"
description: "Frontmatter is the metadata that controls how your page appears and behaves"
sidebarTitle: "Frontmatter"
icon: "book"
tag: "NEW"
---

​
Page mode

Control how your page displays with the mode setting.

​
Default

If no mode is defined, defaults to a standard layout with a sidebar navigation and table of contents. 
---
title: "Default page title"
---

​
Wide

Wide mode hides the table of contents. This is useful for pages that do not have any headings or if you prefer to use the extra horizontal space. 
---
title: "Wide page title"
mode: "wide"
---

​
Custom

Custom mode provides a minimalist layout that removes all elements except for the top navbar. Custom mode is a blank canvas to create landing pages or any other unique layouts that you want to have minimal navigation elements for. 
---
title: "Custom page title"
mode: "custom"
---

​
Center

Center mode removes the sidebar and table of contents, centering the content. This is useful for changelogs or other pages where you want to emphasize the content. 
---
title: "Center page title"
mode: "center"
---

​
API pages

Create interactive API playgrounds by adding an API specification to your frontmatter, api or openapi. 
---
openapi: "GET /endpoint"
---
Learn more about building API documentation. Link to external sites directly from your navigation with the url metadata. 
---
title: "npm Package"
url: "https://www.npmjs.com/package/mint"
---

​
Search engine optimization

Most SEO meta tags are automatically generated. You can set SEO meta tags manually to improve your site’s SEO, social sharing, and browser compatibility.
Meta tags with colons must be wrapped in quotes.
---
"twitter:image": "/images/social-preview.jpg"
---
See SEO for complete SEO metadata options.

​
Internal search keywords

Enhance a specific page’s discoverability in the built-in search by providing keywords in your metadata. These keywords won’t appear as part of the page content or in search results, but users that search for them will be shown the page as a result. 
---
keywords: ['configuration', 'setup', 'getting started']
---