> ## Documentation Index
> Fetch the complete documentation index at: https://wiki.another-horizon.eu/llms.txt
> Use this file to discover all available pages before exploring further.

# Reusable snippets

> Create reusable snippets to maintain consistency across pages.

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.

Snippets do not render as standalone pages. You must import them into other files.

## Create snippets

Create a file in a snippet folder 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

To use snippets, import them into pages using either an absolute or relative path.

* **Absolute imports**: Start with `/snippets/` 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 snippets/my-snippet.mdx theme={null}
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 theme={null}
  ---
  title: "An example page"
  description: "This is an example page that imports a snippet."
  ---

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

  The snippet content displays beneath this sentence.

  <MySnippet/>
  ```

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

  import MySnippet from '../snippets/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 snippets/custom-variables.mdx theme={null}
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 theme={null}
---
title: "An example page"
description: "This is an example page that imports a snippet with variables."
---

import { myName, myObject } from '/snippets/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 snippets/my-snippet.mdx theme={null}
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 theme={null}
---
title: "An example page"
description: "This is an example page that imports a snippet with a variable."
---

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

<MySnippet word="bananas" />

```

### Import React components

1. Create a snippet with a JSX component. See [React components](/customize/react-components) for more information.

```js snippets/my-jsx-snippet.jsx theme={null}
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 theme={null}
---
title: "An example page"
description: "This is an example page that imports a snippet with a React component."
---

import { MyJSXSnippet } from '/snippets/my-jsx-snippet.jsx';

<MyJSXSnippet />
```