From 9d58be521568e00d677e34f9c05b94028dced35f Mon Sep 17 00:00:00 2001
From: Ethan Palm <56270045+ethanpalm@users.noreply.github.com>
Date: Tue, 16 Dec 2025 11:29:41 -0800
Subject: [PATCH 1/4] add snippets prop
---
organize/settings.mdx | 4 ++++
1 file changed, 4 insertions(+)
diff --git a/organize/settings.mdx b/organize/settings.mdx
index d1e1d7dbb..0817f894c 100644
--- a/organize/settings.mdx
+++ b/organize/settings.mdx
@@ -643,6 +643,10 @@ This section contains the full reference for the `docs.json` file.
+
+ Custom locations for snippet files using glob patterns. Files matching these patterns will be treated as snippets in addition to the default `/snippets/` directory.
+
+
Contextual menu for AI-optimized content and integrations.
From 86c5c5f5b543024f90b9ed262677357fbe136570 Mon Sep 17 00:00:00 2001
From: Ethan Palm <56270045+ethanpalm@users.noreply.github.com>
Date: Tue, 16 Dec 2025 11:32:35 -0800
Subject: [PATCH 2/4] update path info in React page
---
customize/react-components.mdx | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/customize/react-components.mdx b/customize/react-components.mdx
index 318e9a49a..3db7c5ca9 100644
--- a/customize/react-components.mdx
+++ b/customize/react-components.mdx
@@ -92,7 +92,7 @@ The counter renders as an interactive React component.
## Importing components
-To import React components in your MDX files, the component files must be located in the `snippets` folder. You can then import them into any MDX page in your documentation. Learn more about [reusable snippets](/create/reusable-snippets).
+To import React components in your MDX files, the component files must be located in a snippet folder. By default, this is the `/snippets/` folder. You can [configure additional directories](/create/reusable-snippets#configure-snippet-folders) to contain snippets in your `docs.json`. Learn more about [reusable snippets](/create/reusable-snippets).
### Example
From 87e3854bb79f5293ce97d0991b54fecf7deb5927 Mon Sep 17 00:00:00 2001
From: Ethan Palm <56270045+ethanpalm@users.noreply.github.com>
Date: Tue, 16 Dec 2025 11:54:15 -0800
Subject: [PATCH 3/4] update snippets page
---
create/reusable-snippets.mdx | 192 ++++++++++++++++++++---------------
1 file changed, 110 insertions(+), 82 deletions(-)
diff --git a/create/reusable-snippets.mdx b/create/reusable-snippets.mdx
index ac9c368af..1faff5696 100644
--- a/create/reusable-snippets.mdx
+++ b/create/reusable-snippets.mdx
@@ -4,129 +4,157 @@ description: "Create reusable snippets to maintain consistency across pages."
keywords: ["content snippets", "reusable content", "variables"]
---
-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.
+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.
-## Creating a custom snippet
+Snippets do not render as standalone pages. They must be imported into other files to be used.
-**Pre-condition**: You must create your snippet file in the `snippets` directory in order for the import to work.
+## Configure snippet folders
+
+By default, any file in a folder named `snippets` is treated as a snippet. You can configure additional custom folders to contain snippets with the `snippets` field in your `docs.json`.
+
+Add [glob patterns](https://code.visualstudio.com/docs/editor/glob-patterns) to the `snippets` array in `docs.json` to specify which files should be treated as snippets.
+
+```json docs.json
+{
+ "snippets": [
+ "components/**",
+ "shared/reusable/**",
+ "shared/common-component.mdx"
+ ]
+}
+```
+
+## 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 be imported into 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/` or your custom snippet location for imports from the root of your project.
+- **Relative imports**: Use `./` or `../` to import snippets relative to the current file's location.
- Snippets support both absolute imports (starting with `/snippets/`) and
- relative imports (starting with `./` or `../`).
+ Relative imports enable IDE navigation. You can use CMD+K (or CTRL+K) in your editor to jump directly to snippet definitions.
-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.
+### Import text
-### Default export
+1. Add content to your snippet file that you want to reuse.
-1. Add content to your snippet file that you want to re-use.
+ ```mdx snippets/my-snippet.mdx
+ Hello world! This is my content I want to reuse across pages.
+ ```
-```typescript snippets/my-snippet.mdx
-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.
-2. Import the snippet into your destination file.
+
-```typescript destination-file.mdx
----
-title: My title
-description: My Description
----
+ ```mdx Absolute import
+ ---
+ title: "An example page"
+ description: "This is an example page that imports a snippet."
+ ---
-import MySnippet from '/snippets/path/to/my-snippet.mdx';
+ import MySnippet from '/snippets/my-snippet.mdx';
-## Header
+ The snippet content is displayed beneath this sentence.
-Lorem impsum dolor sit amet.
+
+ ```
-
+ ```mdx Relative import
+ ---
+ title: "An example page"
+ description: "This is an example page that imports a snippet."
+ ---
+
+ import MySnippet from '../snippets/my-snippet.mdx';
-```
+ The snippet content is displayed beneath this sentence.
-### 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.
+
-```typescript snippets/my-snippet.mdx
-My keyword of the day is {word}.
-```
+### Import variables
-2. Import the snippet into your destination file with the variable. The property will fill in based on your specification.
+Reference variables from a snippet in a page.
-```typescript destination-file.mdx
----
-title: My title
-description: My Description
----
+1. Export variables from a snippet file.
-import MySnippet from '/snippets/path/to/my-snippet.mdx';
+ ```mdx snippets/custom-variables.mdx
+ export const myName = "Ronan";
-## Header
+ export const myObject = { fruit: "strawberries" };
+ ```
-Lorem impsum dolor sit amet.
+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 '/snippets/custom-variables.mdx';
-### Reusable variables
+ Hello, my name is {myName} and I like {myObject.fruit}.
+ ```
-1. Export a variable from your snippet file:
+### Import snippets with variables
-```typescript snippets/path/to/custom-variables.mdx
-export const myName = "my name";
+Use variables to pass data to a snippet when you import it.
-export const myObject = { fruit: "strawberries" };
-```
+1. Add variables that are filled in with properties when you import the snippet. In this example, our variable is `{word}`.
-2. Import the snippet from your destination file and use the variable:
+ ```mdx snippets/my-snippet.mdx
+ My keyword of the day is {word}.
+ ```
-```typescript destination-file.mdx
----
-title: My title
-description: My Description
----
+2. Import the snippet into your destination file with the variable. The property will fill in based on your specification.
-import { myName, myObject } from '/snippets/path/to/custom-variables.mdx';
+ ```mdx destination-file.mdx
+ ---
+ title: "An example page"
+ description: "This is an example page that imports a snippet with a variable."
+ ---
-Hello, my name is {myName} and I like {myObject.fruit}.
-```
+ import MySnippet from '/snippets/my-snippet.mdx';
-### JSX snippets
+
-1. Export a JSX component from your snippet file. (See [React components](/customize/react-components) for more information):
+ ```
-```js icon=square-js snippets/my-jsx-snippet.jsx
-export const MyJSXSnippet = () => {
- return (
-
-
Hello, world!
-
- );
-};
-```
+### 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
+ export const MyJSXSnippet = () => {
+ return (
+
+
Hello, world!
+
+ );
+ };
+ ```
- Important: When creating JSX snippets, use arrow function syntax (`=>`) rather
- than function declarations. The `function` keyword is not supported in this
- context.
+ When creating JSX snippets, use arrow function syntax (`=>`) rather than function declarations. The `function` keyword is not supported in snippets.
-2. Import the snippet from your destination file and use the component:
+2. Import the snippet.
-```typescript destination-file.mdx
----
-title: My title
-description: My Description
----
+ ```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 '/snippets/my-jsx-snippet.jsx';
+ import { MyJSXSnippet } from '/snippets/my-jsx-snippet.jsx';
-
-```
+
+ ```
From 2691895d8f536b56efd4b076c4900f0a63dbd887 Mon Sep 17 00:00:00 2001
From: Ethan Palm <56270045+ethanpalm@users.noreply.github.com>
Date: Tue, 16 Dec 2025 16:00:16 -0800
Subject: [PATCH 4/4] reviewer feedback
---
create/reusable-snippets.mdx | 16 ++++++++--------
organize/settings.mdx | 8 +++++++-
2 files changed, 15 insertions(+), 9 deletions(-)
diff --git a/create/reusable-snippets.mdx b/create/reusable-snippets.mdx
index 1faff5696..81d0d71ba 100644
--- a/create/reusable-snippets.mdx
+++ b/create/reusable-snippets.mdx
@@ -6,13 +6,13 @@ 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.
-Snippets do not render as standalone pages. They must be imported into other files to be used.
+Snippets do not render as standalone pages. You must import them into other files.
## Configure snippet folders
By default, any file in a folder named `snippets` is treated as a snippet. You can configure additional custom folders to contain snippets with the `snippets` field in your `docs.json`.
-Add [glob patterns](https://code.visualstudio.com/docs/editor/glob-patterns) to the `snippets` array in `docs.json` to specify which files should be treated as snippets.
+Add [glob patterns](https://code.visualstudio.com/docs/editor/glob-patterns) to the `snippets` array in `docs.json` to specify which folders contain snippets.
```json docs.json
{
@@ -26,7 +26,7 @@ Add [glob patterns](https://code.visualstudio.com/docs/editor/glob-patterns) to
## 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 be imported into other 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
@@ -36,7 +36,7 @@ To use snippets, import them into pages using either an absolute or relative pat
- **Relative imports**: Use `./` or `../` to import snippets relative to the current file's location.
- Relative imports enable IDE navigation. You can use CMD+K (or CTRL+K) in your editor to jump directly to snippet definitions.
+ Relative imports enable IDE navigation. Press CMD and click a snippet name in your editor to jump directly to the snippet definition.
### Import text
@@ -59,7 +59,7 @@ To use snippets, import them into pages using either an absolute or relative pat
import MySnippet from '/snippets/my-snippet.mdx';
- The snippet content is displayed beneath this sentence.
+ The snippet content displays beneath this sentence.
```
@@ -72,7 +72,7 @@ To use snippets, import them into pages using either an absolute or relative pat
import MySnippet from '../snippets/my-snippet.mdx';
- The snippet content is displayed beneath this sentence.
+ The snippet content displays beneath this sentence.
```
@@ -108,13 +108,13 @@ Reference variables from a snippet in a page.
Use variables to pass data to a snippet when you import it.
-1. Add variables that are filled in with properties when you import the snippet. In this example, our variable is `{word}`.
+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
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.
+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
---
diff --git a/organize/settings.mdx b/organize/settings.mdx
index 0817f894c..529b4ed23 100644
--- a/organize/settings.mdx
+++ b/organize/settings.mdx
@@ -644,7 +644,13 @@ This section contains the full reference for the `docs.json` file.
- Custom locations for snippet files using glob patterns. Files matching these patterns will be treated as snippets in addition to the default `/snippets/` directory.
+ Specify additional folders for reusable snippets using [glob patterns](https://code.visualstudio.com/docs/editor/glob-patterns). Any files in folders matching these patterns are snippets, in addition to the default `/snippets/` folder.
+
+ ```json Example snippets configuration
+ {
+ "snippets": ["components/**", "shared/shared-file.mdx"]
+ }
+ ```