Reusable Snippets

Reusable, custom snippets to keep content in sync

One of the core principles of software development is DRY (Don’t Repeat Yourself), which applies to documentation as well. If you find yourself repeating the same content in multiple places, you should create a custom snippet to keep your content in sync.

Creating a custom snippet

Pre-condition: You must create your snippet file in the snippets directory in order for the import to work.

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

1. Add content to your snippet file that you want to re-use. Optionally, you can add variables that can be filled in via props when you import the snippet. In this example, our variable is word.

snippets/my-snippet.mdx

Hello world! This is my content I want to reuse across pages. 

2. Import the snippet into your destination file.

destination-file.mdx

---
title: My title
description: My Description
---

import MySnippet from '/snippets/path/to/my-snippet.mdx';

## Header

Lorem impsum dolor sit amet.

<MySnippet/>

Exporting with variables

1. Optionally, you can add variables that can be filled in via props when you import the snippet. In this example, our variable is word.

snippets/my-snippet.mdx

My keyword of the day is {word}.

2. Import the snippet into your destination file with the variable. The property will fill in based on your specification.

destination-file.mdx

---
title: My title
description: My Description
---

import MySnippet from '/snippets/path/to/my-snippet.mdx';

## Header

Lorem impsum dolor sit amet.

<MySnippet word="bananas" />

Reusable variables

1. Export a variable from your snippet file:

snippets/path/to/custom-variables.mdx

export const myName = 'my name';

export const myObject = { fruit: 'strawberries' };

2. Import the snippet from your destination file and use the variable:

destination-file.mdx

---
title: My title
description: My Description
---

import { myName, myObject } from '/snippets/path/to/custom-variables.mdx';

Hello, my name is {myName} and I like {myObject.fruit}.

Reusable components

1. 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.

2. Import the snippet into your destination file and pass in the props

destination-file.mdx

---
title: My title
description: My Description
---

import { MyComponent } from '/snippets/custom-component.mdx';

Lorem ipsum dolor sit amet.

<MyComponent title={'Custom title'} />

Client-Side Content

By default, Mintlify employs server-side rendering, generating content at build time. For client-side content loading, ensure to verify the document object’s availability before initiating the rendering process.

snippets/client-component.mdx

{/* `setTimeout` simulates a React.useEffect, which is called after the component is mounted. */}
export const ClientComponent = () => {
  if (typeof document === "undefined") {
    return null;
  } else {
    setTimeout(() => {
      const clientComponent = document.getElementById("client-component");
      if (clientComponent) {
        clientComponent.innerHTML = "Hello, client-side component!";
      }
    }, 1);

    return <div id="client-component"></div>
  }
}