One of the core principles of software development is DRY (Don’t Repeat Yourself). This is a principle that apply to documentation as well. If you find yourself repeating the same content in multiple places, you should consider creating a custom snippet to keep your content in sync.

​
Creating a custom snippet

Pre-condition: You must create your snippet file in the snippets directory.

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.

​
Default export

  1. Add content to your snippet file that you want to re-use across multiple locations. Optionally, you can add variables that can be filled in via props when you import the snippet.
snippets/my-snippet.mdx
Hello world! This is my content I want to reuse across pages. My keyword of the

day is {word}.

The content that you want to reuse must be inside the snippets directory in order for the import to work.

  1. Import the snippet into your destination file.
destination-file.mdx
---

title: My title

description: My Description

---



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



## Header



Lorem impsum dolor sit amet.



<MySnippet word="bananas" />

​
Reusable variables

  1. Export a variable from your snippet file:
snippets/path/to/custom-variables.mdx
export const myName = 'my name';



export const myObject = { fruit: 'strawberries' };
  1. Import the snippet from your destination file and use the variable:
destination-file.mdx
---

title: My title

description: My Description

---



import { myName, myObject } from '/snippets/path/to/custom-variables.mdx';



Hello, my name is {myName} and I like {myObject.fruit}.

​
Reusable components

  1. Inside your snippet file, create a component that takes in props by exporting your component in the form of an arrow function.
snippets/custom-component.mdx
export const MyComponent = ({ title }) => (

  <div>

    <h1>{title}</h1>

    <p>... snippet content ...</p>

  </div>

);

MDX does not compile inside the body of an arrow function. Stick to HTML syntax when you can or use a default export if you need to use MDX.

  1. Import the snippet into your destination file and pass in the props
destination-file.mdx
---

title: My title

description: My Description

---



import { MyComponent } from '/snippets/custom-component.mdx';



Lorem ipsum dolor sit amet.



<MyComponent title={'Custom title'} />