Reusable snippets help you maintain consistent content across your documentation by allowing you to write content once and reuse it in multiple places. This is especially useful for content that needs to stay in sync across different pages.
Creating a Custom Snippet
All snippets must be created in the snippets
directory.
Files in the snippets
directory are treated as snippets and won’t be rendered as standalone pages.
Basic Usage
- Create a snippet file with your reusable content:
Hello world! This is my reusable content. My keyword is {word}.
- Import and use the snippet in your documentation:
---
title: My Page
description: My Description
---
import MySnippet from '/snippets/my-snippet.mdx';
<MySnippet word="example" />
Using Variables
You can also create reusable variables:
export const productName = 'My Product';
export const version = '1.0.0';
Then import and use them:
import { productName, version } from '/snippets/variables.mdx';
Welcome to {productName} version {version}!
This simplified guide covers the most common use cases for reusable snippets. For more advanced usage, including client-side components and complex props, please refer to our advanced documentation.