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 is used.

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

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

<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

1. Add content to your snippet file that you want to reuse.

    ```mdx shared/my-snippet.mdx wrap
    Hello world! This is my content I want to reuse across pages.
    ```

2. Import the snippet into your destination file using 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>

### Import variables

Reference variables from a snippet in a page.

1. Export variables from a snippet file.

    ```mdx shared/custom-variables.mdx
    export const myName = "Ronan";

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

    ;
    ```

2. 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}.
    ```

### Import snippets with variables

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

1. Add variables to your snippet and 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}.
    ```

2. 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" />
    ```

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

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

2. 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 />
    ```