Reusable snippets

View as Markdown

Keep your documentation DRY (Don’t Repeat Yourself) with single sourcing: define a reusable Markdown snippet once, and then reference it in multiple places. This way, you only need to update the snippet in one place to keep all references in sync.

Reusable snippets work well for constants (API limits, subscription prices, version numbers), repeated warnings or notes, and standardized formatting blocks.

1

Create file structure

Create a folder called snippets anywhere in your fern project. Inside the snippets folder, create a new Markdown file for each snippet you want to define.

Example file structure
$fern
>└─ pages
> └─ my-tutorial.mdx
>└─ assets
>└─ snippets
> ├─ herbs.mdx
> ├─ peace-lily.mdx
> └─ trees.mdx
2

Create a snippet

In each snippet file, define the content you want to reuse.

snippets/peace-lily.mdx
1Peace lilies are easy to grow and relatively trouble-free.
3

Add parameters to snippets (optional)

To make snippets more flexible, you can use parameters (also called variables). Parameters use the {{parameterName}} syntax and can be placed anywhere in your snippet content.

snippets/watering-schedule.mdx
1<Warning>Remember to water your {{plant}} every {{interval}} days.</Warning>

You can then pass different values to these parameters each time you use the snippet.

4

Use a snippet

To use a snippet in your documentation, reference it by its file path (including the .mdx extension). If you used parameters (variables) in your snippet, pass values for each parameter:

1<Markdown src="/snippets/peace-lily.mdx">
2
3They symbolize peace and prosperity.
4
5<Markdown src="/snippets/watering-schedule.mdx" plant="peace lily" interval="3">
File paths

The src path is an absolute path that takes the fern folder as the root. The path is the same no matter which page you’re referencing it from:

Folder structureReference
fern/snippets/peace-lily.mdxsrc="/snippets/peace-lily.mdx"
fern/docs/snippets/peace-lily.mdxsrc="/docs/snippets/peace-lily.mdx"
fern/docs/guides/snippets/peace-lily.mdxsrc="/docs/guides/snippets/peace-lily.mdx"