Reusable Snippets

Reusable, custom snippets to keep content in sync

To maintain DRY (Don’t Repeat Yourself) principles in documentation, use custom snippets to keep repeated content in sync across multiple pages.

Creating Custom Snippets

All snippets must be created in the snippets directory. These files won’t be rendered as standalone pages unless imported and used as components.

Basic Snippet Usage

Create a snippet with optional variables:

snippets/my-snippet.mdx

Hello world! This is reusable content. My keyword is {word}.

Import and use in your destination file:

destination-file.mdx

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

<MySnippet word="bananas" />

Variables and Components

Export variables:

snippets/custom-variables.mdx

export const myName = 'my name';
export const myObject = { fruit: 'strawberries' };

Create reusable components:

snippets/custom-component.mdx

export const MyComponent = ({ title }) => (
  <div>
    <h1>{title}</h1>
    <p>... snippet content ...</p>
  </div>
);

MDX doesn’t compile inside arrow functions. Use HTML syntax or default exports for MDX content.

Client-Side Content

For client-side rendering, check for document availability:

snippets/client-component.mdx

export const ClientComponent = () => {
  if (typeof document === "undefined") return null;
  
  setTimeout(() => {
    const element = document.getElementById("client-component");
    if (element) element.innerHTML = "Hello, client-side component!";
  }, 1);

  return <div id="client-component"></div>;
}