Reusable snippets

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.

​

Creating a custom snippet

Pre-condition: You must create your snippet file in the snippets directory in order for the import to work.

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. Optionally, you can add variables that can be filled in via props when you import the snippet. In this example, our variable is word.

Hello world! This is my content I want to reuse across pages. 

2. Import the snippet into your destination file.

---
title: My title
description: My Description
---

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

## Header

Lorem impsum dolor sit amet.

<MySnippet/>

​

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.

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.

---
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:

export const myName = 'my name';

export const myObject = { fruit: 'strawberries' };

2. Import the snippet from your destination file and use the variable:

---
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}.

​

JSX snippets

1. Export a JSX component from your snippet file. (See React components for more information):

export const MyJSXSnippet = () => {
  return (
    <div>
      <h1>Hello, world!</h1>
    </div>
  )
}

2. Import the snippet from your destination file and use the component:

---
title: My title
description: My Description
---

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