mintlify__docs/create/reusable-snippets.mdx

---
title: "Reusable snippets"
description: "Create reusable content snippets with variables to maintain consistency across documentation pages and reduce duplication in your MDX files."
keywords: ["content snippets", "reusable content", "variables"]
---

One of the core principles of software development is DRY (Don't Repeat Yourself), which applies to documentation too. If you find yourself repeating the same content in multiple places, create a custom snippet for that content. Snippets contain content that you can import into other files to reuse. You control where the snippet appears on a page. If you ever need to update the content, you only need to edit the snippet rather than every file where the snippet appears.

<Note>
  Snippets are not currently supported in the web editor. To use snippets, edit your MDX files locally with the CLI or push snippet imports directly to your repository.
</Note>

## How snippets work

Snippets are any `.mdx`, `.md`, or `.jsx` files imported into another file. You can place snippet files anywhere in your project. 

When you import a snippet into another file, the snippet only appears where you import it and does not render as a standalone page. Any file in the `/snippets/` folder is always a snippet even if it is not imported into another file.

## Create snippets

Create a file with the content you want to reuse. Snippets can contain all content types supported by Mintlify and they can import other snippets. See [Nested snippets](#nested-snippets) for where to declare imports when nesting.

## Import snippets into pages

Import snippets into pages using either an absolute or relative path.

- **Absolute imports**: Start with `/` for imports from the root of your project.
- **Relative imports**: Use `./` or `../` to import snippets relative to the current file's location.

The name you use to render an imported snippet as a JSX tag must start with an uppercase letter, such as `MySnippet`. MDX treats lowercase tags such as `<mySnippet />` as literal HTML or custom element names rather than references to imported snippets.

<Tip>
  Relative imports enable IDE navigation. Press <kbd>CMD</kbd> and click a snippet name in your editor to jump directly to the snippet definition.
</Tip>

### Import text

<Steps>
  <Step title="Add content to your snippet file">
    Add the content you want to reuse.

    ```mdx shared/my-snippet.mdx wrap
    Hello world! This is my content I want to reuse across pages.
    ```
  </Step>
  <Step title="Import the snippet into your destination file">
    Use either an absolute or relative path.

    <CodeGroup>

    ```mdx Absolute import
    ---
    title: "An example page"
    description: "This is an example page that imports a snippet."
    ---

    import MySnippet from "/shared/my-snippet.mdx";

    The snippet content displays beneath this sentence.

    <MySnippet />
    ```

    ```mdx Relative import
    ---
    title: "An example page"
    description: "This is an example page that imports a snippet."
    ---

    import MySnippet from "../shared/my-snippet.mdx";

    The snippet content displays beneath this sentence.

    <MySnippet />
    ```

    </CodeGroup>
  </Step>
</Steps>

### Nested snippets

Snippets can import other snippets. Declare the import in the snippet file that uses the nested snippet, not in the page that imports the parent snippet.

Each file resolves its own imports. Imports declared on a page do not apply to the snippets that the page imports. A nested snippet that relies on a page-level import may render as empty content.

<Steps>
  <Step title="Import the nested snippet in the parent snippet file">
    Declare the import where you want to use the nested snippet.

    ```mdx shared/parent-snippet.mdx
    import ChildSnippet from "/shared/child-snippet.mdx";

    This snippet renders another snippet beneath this sentence.

    <ChildSnippet />
    ```
  </Step>
  <Step title="Import only the parent snippet in your destination file">
    You do not need to import the nested snippet.

    ```mdx destination-file.mdx
    ---
    title: "An example page"
    description: "This is an example page that imports a snippet containing a nested snippet."
    ---

    import ParentSnippet from "/shared/parent-snippet.mdx";

    <ParentSnippet />
    ```
  </Step>
</Steps>

### Import variables

Reference variables from a snippet in a page.

<Steps>
  <Step title="Export variables from a snippet file">
    ```mdx shared/custom-variables.mdx
    export const myName = "Ronan";

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

    ;
    ```
  </Step>
  <Step title="Import the snippet from your destination file and use the variable">
    ```mdx destination-file.mdx
    ---
    title: "An example page"
    description: "This is an example page that imports a snippet with variables."
    ---

    import { myName, myObject } from "/shared/custom-variables.mdx";

    Hello, my name is {myName} and I like {myObject.fruit}.
    ```
  </Step>
</Steps>

### Import snippets with variables

Use variables to pass data to a snippet when you import it.

<Steps>
  <Step title="Add variables to your snippet">
    Pass in properties when you import it. In this example, the variable is `{word}`.

    ```mdx shared/my-snippet.mdx
    My keyword of the day is {word}.
    ```
  </Step>
  <Step title="Import the snippet into your destination file with the variable">
    The passed property replaces the variable in the snippet definition.

    ```mdx destination-file.mdx
    ---
    title: "An example page"
    description: "This is an example page that imports a snippet with a variable."
    ---

    import MySnippet from "/shared/my-snippet.mdx";

    <MySnippet word="bananas" />
    ```
  </Step>
</Steps>

Variables also interpolate inside fenced code blocks. This is useful for snippets that include installation commands or other code examples that differ by package name, version, or environment.

````mdx shared/install-snippet.mdx
export const InstallSnippet = ({ packageName }) => <></>;

Install the package:

```bash
npm install {packageName}
```
````

```mdx destination-file.mdx
import InstallSnippet from "/shared/install-snippet.mdx";

<InstallSnippet packageName="@myorg/sdk" />
```

### Import React components

<Steps>
  <Step title="Create a snippet with a JSX component">
    See [React components](/customize/react-components) for more information.

    ```js components/my-jsx-snippet.jsx
    export const MyJSXSnippet = () => {
      return (
        <div>
          <h1>Hello, world!</h1>
        </div>
      );
    };
    ```

    <Note>
      When creating JSX snippets, use arrow function syntax (`=>`) rather than function declarations. The `function` keyword is not supported in snippets.
    </Note>
  </Step>
  <Step title="Import the snippet">
    ```mdx destination-file.mdx
    ---
    title: "An example page"
    description: "This is an example page that imports a snippet with a React component."
    ---

    import { MyJSXSnippet } from "/components/my-jsx-snippet.jsx";

    <MyJSXSnippet />
    ```
  </Step>
</Steps>