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

  1. Create a snippet file with your reusable content:
snippets/my-snippet.mdx
Hello world! This is my reusable content. My keyword is {word}.
  1. Import and use the snippet in your documentation:
destination-file.mdx
---
title: My Page
description: My Description
---

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

<MySnippet word="example" />

Using Variables

You can also create reusable variables:

snippets/variables.mdx
export const productName = 'My Product';
export const version = '1.0.0';

Then import and use them:

destination-file.mdx
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.

Was this page helpful?