Skip to main content
Reusable snippets help you maintain consistency across your documentation by allowing you to write content once and reuse it in multiple locations. When you update a snippet, all pages using it are automatically updated.

​
Creating a custom snippet

Pre-condition: You must create your snippet file in the snippets directory.
Any page in the snippets directory will be treated as a snippet and will not be rendered into a standalone page. If you want to create a standalone page from the snippet, import the snippet into another file and call it as a component.

​
Default export

The simplest way to create a reusable snippet is using the default export pattern.
Add content to your snippet file that you want to re-use across multiple locations. Optionally, you can add variables that can be filled in via props when you import the snippet.
snippets/my-snippet.mdx
Hello world! This is my content I want to reuse across pages. My keyword of the
day is {word}.
The content that you want to reuse must be inside the snippets directory in order for the import to work.
Use props to make your snippets dynamic and customizable for different contexts.

​
Reusable variables

Export and reuse specific variables across multiple pages.
Export a variable from your snippet file:
snippets/path/to/custom-variables.mdx
export const myName = 'my name';

export const myObject = { fruit: 'strawberries' };
Reusable variables are perfect for maintaining consistent values like product names, version numbers, or common configuration values across your documentation.

​
Reusable components

Create more complex reusable components that accept multiple props.
Inside your snippet file, create a component that takes in props by exporting your component in the form of an arrow function.
snippets/custom-component.mdx
export const MyComponent = ({ title }) => (
  <div>
    <h1>{title}</h1>
    <p>... snippet content ...</p>
  </div>
);
MDX does not compile inside the body of an arrow function. Stick to HTML syntax when you can or use a default export if you need to use MDX.

​
Use cases

Reusable snippets are ideal for various documentation scenarios:

Common use cases

  • API credentials setup - Reuse authentication instructions across API endpoints
  • Prerequisites - Share common setup requirements across multiple guides
  • Warning messages - Maintain consistent warning text throughout docs
  • Product versions - Keep version numbers synchronized
  • Code examples - Share boilerplate code across tutorials
  • Contact information - Display consistent support details

​
Best practices

  • Keep snippets in the /snippets directory
  • Use descriptive file names
  • Organize snippets into subdirectories by category
  • Document what each snippet does
When you update a snippet, the changes automatically propagate to all pages that import it, ensuring consistency across your entire documentation.

Build docs developers (and LLMs) love

Get started for freeTalk to us